©2020-2024 ioDraw All rights reserved,
Privacy Policy
<>什么是Vuex？
Vuex是一个全局共享数据的区域，相当于一个数据仓库；
Vuex是为了保存 组件之间共享数据而诞生的，如果组件之间 有要共享的数据，可以直接挂载到Vuex上，而不必通过父子之间的传值；
私密的数据不需要放在Vuex上，只有共享的数据才有必要放在Vuex上；
<>标题安装Vue？
cnpm i vuex -S import Vuex from 'vuex' Vue.use(Vuex) new Vuex.store() //
创建一个实例，得到一个数据仓库对象，如下 var store = new Vuex.store({ state: {}, // 相当于vue 中的
data，专门用来存储数据 mutations: {} // 相当于vue 中的 methods }) store:store // 在 vue
事例中挂载一下，名字一样 可以直接写成 store
<>在组件中使用stroe
this.$store.state.XXXX // 这个只能访问 state 里面的数据
<>为什么不推荐直接操作state 的方法来传递数据？
这样做可能会导致数据的紊乱，又不能查找出来是谁操作数据出现了紊乱。
<>所以使用 mutations(中间件) 中的方法来间接操作数据(同步)
state: { count:0 } mutations: { add(state) { // 这个里面的参数 最多
只能传两个参数，第二个可以是自己给的参数 state.count++ } } this.$store.commit('add')
<>什么是getters？
getters 和 state，mutations平级，他和vue中过滤器一样都不修改数据，只是给数据做了一层包装 getters: { potCount:
function(state) { // 谁调用它，就直接返回的是他return 后包装的结果 return '这个数据是：' + state.count
// 这个数据是双向绑定的，改变之后也会跟着改变 } } // 调用 getters $store.getters.optCount
<>action异步函数请求？(异步)
1，this.$store.dispatch(‘函数名’) // '函数名指 action中的异步函数名'
要修改数据则要在异步函数中触发mutations中的函数：context.commit(‘函数名’)
携带参数：this.$store.dispatch(‘函数名’, 参数)
2，导入vuex中的mapActions函数，将指定的action函数映射为当前组件的methods函数： …mapActions([‘函数名’])
携带参数:在调用时传参即可 3，action也可以操作mutation
<>Module分割模块
Module是store分割的模块，每个模块拥有自己的state、getters、mutations、actions。 const moduleA = {
state: { ... }, mutations: { ... }, actions: { ... }, getters: { ... } } const
moduleB= { state: { ... }, mutations: { ... }, actions: { ... } } const store =
new Vuex.Store({ modules: { a: moduleA, b: moduleB } }) store.state.a // ->
moduleA 的状态 store.state.b // -> moduleB 的状态
<>总结
1，获取数据使用 this.$store.state.XXXX 2，改变数据使用 mutations 3，包装数据使用 getters
4，可以通过mapState辅助函数将state和getters映射到当前组件的computed计算属性当中，获取数据，并且通过计算属性返回给组件使用。
5，一些复用的ajax请求可以写在vuex的action中，用promise包装并用async
await处理返回的数据，用于处理异步任务。异步方法必须有一个参数rootState，代表当前store实例对象 6，modules
模块划分，Module是store分割的模块，每个模块拥有自己的state、getters、mutations、actions。