Vuex中的store

每一个 Vuex 应用的核心就是 store（仓库）。store 基本上就是一个容器，包含着应用中大部分的 state（状态）。

Vuex和单纯的全局对象有以下两点不同：

• Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
• 不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

如何创建 Store

安装好 Vuex 后，我们就可以创建 store 了，如下所示：

const store = new Vuex.Store({...});

从上述代码可以知道，store 是Vuex.Store 这个构造函数 new 出来的实例。在构造函数中可以传一个对象参数，这个参数可以包含 5 个对象：state、getters、mutations、actions、mudules，其中最基本的是 state 和 mutations。

示例：

我们可以在项目的 src 目录下新建一个store.js 文件，在文件中引用 vue 和 vuex：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex) // 全局安装 Vuex

const store = new Vuex.Store({
    state: {count: 0},
    mutations: {increment (state) {state.count++}
    }
})
export default store  // 将 vuex 实例暴露出去，以便其他的任何文件进行共享数据

一个完整的 store 结构

const store = new Vuex.Store({
  state: {// 存放状态},
  getters: {// state 的计算属性},
  mutations: {// 更改 state 中状态的逻辑，同步操作},
  actions: {// 提交 mutation，异步操作},
  // 如果将 store 分成一个个的模块的话，则需要用到 modules。// 然后在每一个 module 中写 state, getters, mutations, actions 等。modules: {
    a: moduleA,
    b: moduleB,
    // ...
  }
});