Vuex 状态管理模式

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import Vuex from 'vuex'
import store from './store'
Vue.use(Vuex)
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store=new Vuex.Store({
  state: {}, //状态
  getters: {}, //计算属性
  mutations: {},  //事件
  actions: {}, //提交 mutations
  modules: {}  //将 store 分割成模块(每块里都可有：state，getters，mutations，actions)
})
export default store

核心概念：state、 getter 、mutations 、 actions
state 是一个全局的状态存储，数据会存储在其中，vue组件可以直接访问其中的值，但是只可以读。

getter 当需要对获取数据进行加工，而不是直接获取state中的数据，这时候可以通过getter定义函数，返回对应的数据。

mutations 是vuex中唯一一个可以修改数据的地方，mutations可以定义事件函数，在vue组件中可以通过commit更改数据。mutations中的操作必须是同步的，不可存在异步操作的情况。

actions和mutation相似，不同的是actions中不直接修改state，而是通过commit调用mutations修改数据，而且actions中可以存在异步处理逻辑

Module由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}