【11】Vuex 状态树

Vuex 状态树

对于每个大项目来说，使用状态树 (store) 管理状态 (state) 十分有必要。这就是为什么 Nuxt.js 内核实现了 Vuex。

在Vue School 上观看关于Nuxt.js 和 Vuex 的免费课程

使用状态树

Nuxt.js 会尝试找到应用根目录下的 store 目录，如果该目录存在，它将做以下的事情：

1. 引用 vuex 模块
2. 将 vuex 模块 加到 vendors 构建配置中去
3. 设置 Vue 根实例的 store 配置项

Nuxt.js 支持两种使用 store 的方式，你可以择一使用：

• 模块方式： store 目录下的每个 .js 文件会被转换成为状态树指定命名的子模块 （当然，index 是根模块）

• Classic(不建议使用)： store/index.js返回创建Vuex.Store实例的方法。

无论使用那种模式，您的state的值应该始终是function，为了避免返回引用类型，会导致多个实例相互影响。

普通方式

Nuxt.js允许您拥有一个 store 目录，其中包含与模块对应的每个文件。

首先，只需将状态导出为 函数，将变量和操作作为 store/index.js 中的对象导出：

export const state = () => ({
  counter: 0
})

export const mutations = {
  increment (state) {
    state.counter++
  }
}

然后&#x