vuex总结

vuex，是vue的状态管理模式，相当于一个仓库，仓库里的数据等.在所有的组件中都能够访问，

使用时机：在我们开发一个中大型应用时，组件之间来回传值会相当麻烦，这时就需要用到vuex；相反如果只是一个简单的Demo练习，使用vuex则显得繁琐冗余

npm安装：npm install vuex --save

使用方法

　　vuex需要在main.js中注册，并将store挂载到vue实例上

　　　　import Vuex from 'vuex'
　　　　Vue.use(Vuex)
　　　　let store = new Vuex.Store({
　　　　　　state: {}, // this.$store.state.***
　　　　　　mutations: {},// this.$store.commit('方法名', '按需传递唯一的参数')
 　　　　　 getters: {},// this.$store.getters.*** 相当于计算属性，也相当于 filters(过滤器)
　　　　　　actions: {},// 处理异步
　　　　　　modules: {}
　　　　})　

　　　　　new Vue({

　　　　　　 el: '#app',

　　　　　　 router,

　　　　　　 render: h => h(App),

　　　　　　 store // 挂载

　　　　　})

store实例中的选项

　　state(状态)，在这个选项中存储我们的数据，当Vue组件从store中读取状态的时候，若store中的状态发生变化，那么组件中的也会随之改变，通过this.$store.state来访问

注意：state中的状态不能在组件中直接更改，要提交给mutations来改变，

　　在组件中 this.$store.commit('方法名',payload),第一个参数就是mutations中的处理方法，第二个参数是载荷，额外的参数，可以是一个数值，也可以是一个对象，大多数情况下都是对象

　　mutations，更改store状态的唯一方法就是提交(commit)mutations,里面的方法都会接受state作为第一个参数，第二个参数就是payload，接受commit提交来的额外参数，提交方法见上👆

注意：mutations中的函数必须是同步的

　　

　　getters，相当于计算属性，内部的方法第一个参数是state，第二个参数是getters。getters中的方法返回值会根据它的依赖被缓存起来，当它的依赖值发生改变时会重新计算

在组件中通过this.$store.getters来访问

 

　　actions，类似于mutations，不同点在于，actions是提交给mutations的，而且actions可以包含任何异步操作，它内部的函数接受一个与 store 实例具有相同方法和属性的 context 对象

但这个对象并不是store实例本身，在组建中通过this.$store.dispatch('方法名')来触发actions

 

　　modules，当我们开发的应用越来越复杂时，store就会变得庞大、臃肿，代码过多，很乱，这时，我们就可以将store分割成一个一个的模块，每个模块都拥有自己的state、mutation、getter、action

例如：

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 的状态