Vuex状态管理

整体印象：用于维护一个或多个State，在整个Vue工程中共享数据

数据仓储模型

数据仓储模型

数据同步模型

数据同步模型

使用Vuex仓库

要使用vuex仓库，需要先安装vuex组件。之后引入Vuex到其main.js中（就是根组件）然后再注册该组件

import Vuex from 'vuex'
.........
.........
Vue.use(Vuex)

之后声明store（Store可以再main.js中声明也可以单独建立文件声明）
其中可以添加五种选项。主要的选项包括：state,mutations,actions
简单来说，state中设置参数。getter中接收State并设置对State中数据进行处理返回。mutations中接收state并设置对state进行处理的函数。actions中接收dispatch中传来的命令（指定函数与操作），在指定函数内部进行与外部的异步数据交换，之后执行commit跳转到mutation阶段。

let store = new Vuex.Store({
  state: {
    totalPrice: 0
  },
  getters: {
    getTotal (state) {
      return state.totalPrice
    }
  },
  mutations: {
    increment (state, price) {
      state.totalPrice += price
    },
    decrement (state, price) {
      state.totalPrice -= price
    }
  },
  actions: {
    increase (context, price) {
      context.commit('increment', price)
    }
  }
})

使用逻辑:

其中state是存储公有状态的元素。Mutation通过函数直接修改state。而actions通过commit来调用Mutation的函数。而组件通过dispatch方法来使用action中的函数。Actions中可以调用api,其它的不可以。

commit函数：

a) 在action中的commit函数：

action的commit

需要引入context与要传入的参数（price）
其中commit的参数，第一个是要使用的mutation中的函数（’increment’）,第二个是需要传递给mutation的参数。
b) 在组件中直接使用commit函数，跳过action阶段：

在组件中的方法中使用commit

直接使用this.store调用commit函数

dispatch函数

在组件的methods中声明，并使用相应的action

dispatch方法的使用

其中第一个参数是要使用的action函数，第二个参数是要传递的参数信息。

getters组件

getters用来直接或带处理的获取state的值并返回。
在store中设置一个getter函数，之后在组件中调用函数。
例如：

computed: {
    getTotal () {
      return this.$store.getters.getTotal()
    }
  }

Modules组件

声明多个module以切分整理state中繁杂的仓库参数，其中最简单的实现情况：

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`'s state
store.state.b // -> `moduleB`'s state

在多module环境下，其中的state参数都代表本地的state。如果要使用主store的state则用rootState

官方建议的文档组织形式

├── index.html
├── main.js
├── api
│   └── ... # abstractions for making API requests
├── components
│   ├── App.vue
│   └── ...
└── store
    ├── index.js          # where we assemble modules and export the store
    ├── actions.js        # root actions
    ├── mutations.js      # root mutations
    └── modules
        ├── cart.js       # cart module
        └── products.js   # products module

主文件为index.js，其中的actions与mutations方法都被分离为单独的文件。