让你的项目数据流向更清晰(vuex)

vuex是解决多组件数据通信的管理模式

5大核心概念

1.state

统一定义公共数据,类似于vue组件里面data(){return{}}内返回的数据,只不过vuex里面的state是大部分组件都需要共享的数据，数据流向更加清晰，而且数据变化是可预测的 (响应式)，如何在组件里面访问vuex里state的数据和修改呢?(本文主要讲述模块化开发中的语法和注意点)。

在模块化开发中,如果我们在某个模块中定义了数据，而且开发中一定要给每个模块开启命名空间(namespaced:true)，要访问某个特定命名空间模块的数据，可以用辅助函数mapState()来简化访问流程，映射辅助函数可以将命名空间模块的数据映射成组件内部的computed(计算属性),通过计算属性变量名即可直接访问。那么该如何修改其中的数据呢？

2.mutations

更改 Vuex 的 store 中的数据的唯一方法是提交 mutation。而且接收第一个形参为state,通过state.属性名=value可以修改Vuex 的 store 中的数据，同理在模块化开发中，也需要借助辅助函数调用

export defaults{
state(){
return{
count:0
}
}
//在命名空间内部定义mutations
mutations:{
countAdd(state,参数1){
state.count++
}
}
}

组件内:

import {mapMutations} from 'vuex'
methods:{
...mapMutations('组件名',['countAdd'])
}

在组件内通过this.countAdd()即可调用函数，这是开发中常用来修改更改 Vuex 的 store 中的数据的方法 那么如果我们需要用异步操作来修改数据呢?

actions

actions就是发异步请求获取数据，调用mutations来保存数据，将整个ajax操作封装到Vuex的内部 两个注意要点:1 action 内部可以发异步请求操作， 2action是间接修改state的：是通过调用 mutation来修改state

//提前在mutations中定义函数修改state内的数据
export defaults{
 actions: {
    // context对象会自动传入，它与store实例具有相同的方法和属性
    action的名字: function(context, 载荷) {
      // 1. 发异步请求, 请求数据
      一般actions在声明周期钩子函数中created中调用,用来请求页面初始数据
      // 2. commit调用mutation来修改数据
      
      // context.commit('mutation名', 载荷)
    }
  }
}
同样也是用辅助函数简化组件访问模块方法

getters

在state中的数据的基础上，进一步对数据进行加工得到新数据。(与组件中computed一样)

export defaults{
getters: {
    // state 就是上边定义的公共数据state
    getter的名字1: function(state) {
      return 要返回的值
    }
}
 

//组件内访问
import {mapGetters} from 'vuex'
methods:{
...mapGetters('组件名',['getters名'])
}

module

随着项目越来越大，需要放在vuex中的数据越来越多，怎么办呢？ 可以拆分模板，把复杂的场景按模块来拆开 使用了modules之后，在访问数据时就要额外添加modules的名字了。 模块的方式前面已经都介绍完了

希望对你有帮助!!!