VUE--VUEX

一、什么是Vuex

Vuex就是一个vue的状态（数据）管理工具，是vue项目实现大范围数据共享的技术方案。能够方便、高效的实现组件之间的数据共享。

Vuex的好处：

        （1）数据的存储一步到位，不需要层层传递

        （2）数据的流动十分清晰

        （3）存储在Vuex中的数据都是响应式的（数据更新后，使用数据的组件也会自动更新） 

适合存储到Vuex中的数据----需要共享的数据

Vuex的使用场景：

        频繁、大范围的数据共享。

        （1）某个状态在很多个组件中使用

        （2）多个组件共同维护一份数据 

 

二、Vuex的安装及配置

        1、执行以下命令，安装Vuex 

        注：我的项目是vue2的项目，所以安装的是3.6.2版本的vuex

npm i vuex@3.6.2

         2、新建src/store/index.js，专门存放vuex

        在src目录下新建store文件夹，并在store文件夹下新建index.js文件

        3、创建仓库 

        index.js 内容如下：

// 导入 vue
import Vue from 'vue'
// 导入 vuex
import Vuex from 'vuex'
// vuex也是vue的插件, 需要use一下, 进行插件的安装初始化
Vue.use(Vuex)// 创建仓库实例对象 store
const store = new Vuex.Store()// 导出仓库对象
export default store

        4、挂载到main.js中

         在main.js中导入，并挂载到Vue示例上

        main.js中的内容如下：

import Vue from 'vue'
import App from './App.vue'
import store from './store'Vue.config.productionTip = falsenew Vue({render: h => h(App),store
}).$mount('#app')

        4、测试仓库是否创建成功

        在App.vue中，打印store对象，控制台查看结果

created(){console.log(this.$store)
}

        若控制台输出如下内容，则代表创建仓库成功 

三、state的基础使用 

 state作用：state属性的值是一个对象，用于存储全局共享的数据。

        1、存储数据

        在store/index.js中添加如下内容： 

const store = new Vuex.Store({//这里配置vuex// state 用于存储数据（存储状态）（Vuex状态管理）state: {age: 18,name: 'Tom',list: [{ id: 1, name: 'John', isDone: true },{ id: 2, name: 'Juliy', isDone: true },{ id: 2, name: 'Lily', isDone: true },],},
})

        2、vue页面中使用

  <div>组件1<p>{{ $store.state.name + '--' + $store.state.age }}</p></div>

       3、js中使用

import store from "@/store"console.log(store.state.age)

       4、 结果

 

        5、严格模式

开启严格模式，防止在组件中直接修改state数据，开启后，若直接修改state数据，会报错 

        开启方法：

const store = new Vuex.Store({//这里配置vuex// 开启严格模式，防止在组件中直接修改state数据strict: true,
})

四、mutations的基础使用 

mutations作用： 修改state数据，且是修改state数据的唯一途径

        1、定义方法 

        在store/index.js中添加如下内容：

const store = new Vuex.Store({mutations: {updateAge (state, newAge) {state.age = newAge},},
})

        2、vue页面中使用 

<button @click="$store.commit('updateAge', 20)">更新年龄</button>

        3、结果

        页面点击更新年龄按钮，页面中年龄会发生变化

 

五、actions的基础使用

mutations是同步更新数据 (便于监测数据的变化, 更新视图等, 方便于调试工具查看变化)，

actions则负责进行异步操作。

        1、定义方法 

        在store/index.js中添加如下内容：

const store = new Vuex.Store({// mutations里面放同步方法mutations: {updateAge (state, newAge) {state.age = newAge},},// actions里面放异步方法actions: {updateAgeAfter3s (store, newAge) {setTimeout(() => {// 只有mutations可以修改数据，所以这里调用mutations的方法store.commit('updateAge', newAge)}, 3000)},},
})

        2、vue页面中的使用 

<button @click="$store.dispatch('updateAgeAfter3s', 30)">3s后更新年龄</button>

         3、结果

        页面点击3s后更新年龄按钮，页面中年龄会在3s后发生变化

六、getters的基础使用

getters作用：getters是Vuex中的计算属性（和组件中的计算属性意义一样，但不支持set修改） 

        1、定义方法

        在store/index.js中添加如下内容：

  // 为了方便获取state中的数据，vuex会给每个计算属性的方法，传递一个state参数getters: {ageComputed (state) {return state.age * 2},},

        2、vue页面中使用

<p>{{ $store.getters.ageComputed }}</p>

        3、结果

七、借助辅助方法使用state和getters

mapState和mapGetters是辅助函数，帮助我们把store中的数据映射到组件的计算属性中, 它属于一种方便的用法。

        store/index.js中的内容不变，还是上方的内容，只有vue页面的使用需要修改。

        1、 导入mapState和mapGetters

import { mapState, mapGetters } from 'vuex'

        2、利用展开运算符映射到computed计算属性中 

  computed: {...mapState(['age', 'name']),...mapGetters(['ageComputed']),},

         注：若state中字段名与data中字段名重复，可采用以下方法引入

...mapState({ ages: 'age', uname: 'name' })

        3、vue页面中使用

<p>{{ ages + '---' + uname }}</p>
<p>{{ ageComputed }}</p>

         4、结果

八、借助辅助方法使用mutations和actions

 mapMutations和mapActions，把位于mutations和actions中的方法提取了出来，我们可以将它导入到methods中方便使用。

        1、导入mapMutations和mapActions 

import { mapMutations, mapActions } from 'vuex'

        2、利用展开运算符映射到methods方法中 

  methods: {...mapMutations(['updateAge']),...mapActions(['updateAgeAfter3s']),},

         3、vue页面中使用

<button @click="updateAge(22)">更新年龄</button>
<br />
<button @click="updateAgeAfter3s(24)">3s后更新年龄</button>

         4、结果

九、vuex模块化---modules 

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

即，如果把所有的状态都放在state中，当项目变得越来越大的时候，Vuex会变得越来越难以维护。

由此，又有了Vuex的模块化。

 

        1、模块定义

        在store文件夹下，新建modules文件夹，在modules文件夹中新建user.js和todo.js文件，文件目录如下：

 

        user.js 的内容如下：

// 存储用户相关数据
export default {// 开启命名空间，必须的操作namespaced: true,// state 用于存储数据（存储状态）（Vuex状态管理）state: {age: 18,name: 'Tom',},// mutations是修改state数据的唯一途径// 所有方法不支持一步更新，只支持同步方法mutations: {updateAge (state, newAge) {state.age = newAge},},// actions里面放异步方法actions: {updateAgeAfter3s (store, newAge) {setTimeout(() => {// 只有mutations可以修改数据，所以这里调用mutations的方法store.commit('updateAge', newAge)}, 3000)},},// getters是Vuex中的计算属性（和组件中的计算属性意义一样，但不支持set修改）// 为了方便获取state中的数据，vuex会给每个计算属性的方法，传递一个state参数getters: {ageComputed (state) {return state.age * 2},},
}

        todo.js的内容如下：

// 存储列表相关数据
export default {// 开启命名空间，必须的操作namespaced: true,// state 用于存储数据（存储状态）（Vuex状态管理）state: {list: [{ id: 1, name: 'John', isDone: true },{ id: 2, name: 'Juliy', isDone: true },{ id: 3, name: 'Lily', isDone: true },],},
}

        2、在index.js中导入并注册modules模块

         store/index.js 内容如下：

// 导入 vue
import Vue from 'vue'
// 导入 vuex
import Vuex from 'vuex'// 导入小模块
import user from './modules/user'
import todo from './modules/todo'// vuex也是vue的插件, 需要use一下, 进行插件的安装初始化
// 将vuex注册为插件
Vue.use(Vuex)// 创建仓库 store
// 创建store实例对象
const store = new Vuex.Store({// 这里配置vuex// 开启严格模式，防止在组件中直接修改state数据strict: true,// modules模块注册modules: {user,todo,},
})// 导出仓库/对象
export default store

        3、vue页面中直接使用

<template><div>组件1<p>{{ $store.state.user.name + '--' + $store.state.user.age }}</p><p>{{ $store.getters['user/ageComputed'] }}</p><button @click="$store.commit('user/updateAge', 20)">更新年龄</button><br /><button @click="$store.dispatch('user/updateAgeAfter3s', 30)">3s后更新年龄</button></div>
</template><script>
export default {}
</script><style lang="less" scoped></style>

        4、利用辅助方法调用 

<template><div>组件2<p>{{ age + '---' + name }}</p><!-- <p>{{ ages + '---' + uname }}</p> --><p>{{ ageComputed }}</p><ul><li v-for="item in list" :key="item.id">{{ item.name }}</li></ul><br /><button @click="updateAge(22)">更新年龄</button><br /><button @click="updateAgeAfter3s(24)">3s后更新年龄</button></div>
</template><script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
export default {computed: {...mapState('user', ['age', 'name']),...mapState('todo', ['list']),// 若state中字段名与data中字段名重复，可采用以下方法引入// ...mapState({ ages: 'age', uname: 'name' }),...mapGetters('user', ['ageComputed']),},methods: {...mapMutations(['user/updateAge']),...mapActions(['user/updateAgeAfter3s']),},
}
</script><style lang="less" scoped></style>

十、state、getters、mutations、actions的对比