Vuex 状态树
对于每个大项目来说,使用状态树 (store) 管理状态 (state) 十分有必要。这就是为什么 Nuxt.js 内核实现了 Vuex。
在Vue School 上观看关于Nuxt.js 和 Vuex 的免费课程
使用状态树
Nuxt.js 会尝试找到应用根目录下的 store
目录,如果该目录存在,它将做以下的事情:
- 引用
vuex
模块 - 将
vuex
模块 加到 vendors 构建配置中去 - 设置
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