Nuxt.js 内核实现了 Vuex状态树,使用状态树 (store) 可以管理状态 (state) 。
(1)Vuex状态树
Nuxt.js 会尝试找到应用根目录下的 store
目录,如果该目录存在,它将做以下的事情:
- 引用
vuex
模块。 - 将
vuex
模块加到 vendors 构建配置中去。 - 设置
Vue
根实例的store
配置项。
(2)Vuex状态树使用模式
-
模块模式:
store
目录下的每个.js
文件会被转换成为状态树指定命名的子模块 (index.
js是根模块)
-
Classic(不建议使用):
store/index.js
返回创建Vuex.Store实例的方法。
无论使用那种模式,state
的值应该始终是function
,为了避免返回引用类型,会导致多个实例相互影响。
(3)模块模式提供的两种方式
- 普通方式
Nuxt.js允许工程根目录下拥有一个 store
目录,其中包含与模块对应的每个文件。只需将状态导出为 函数,将变量和操作作为 store/index.js
中的对象导出。
- 模块文件
可以将模块文件分解为单独的文件:state.js
,actions.js
,mutations.js
和getters.js
。如果使用index.js
来维护state
,getters
,actions
和mutations
,同时具有单个单独的操作文件,那么仍然可以正确识别该文件。
在使用拆分文件模块时,必须记住使用箭头函数功能, this
在词法上可用。词法范围this
意味着它总是指向引用箭头函数的所有者。如果未包含箭头函数,那么this
将是未定义的(undefined
)。解决方案是使用 "normal" 功能,该功能会将this
指向自己的作用域,因此可以使用。
(4)插件
可以将其他插件添加到store(在模块模式下),将其放入store/index.js
文件中。
(5)fetch方法
fetch 方法会在渲染页面前被调用,作用是填充状态树 (store) 数据,与 asyncData 方法类似,不同的是它不会设置组件的数据。
(6)nuxtServerInit方法
如果在状态树中指定了 nuxtServerInit
方法,Nuxt.js 调用它的时候会将页面的上下文对象作为第2个参数传给它(服务端调用时才会这样处理的)。当我们想将服务端的一些数据传到客户端时,这个方法是非常好用的。
- context被赋予
nuxtServerInit
作为第二个参数,它与asyncData
或fetch
方法相同。 nuxtServerInit
方法接收的上下文对象和fetch
的一样,但不包括context.redirect()
和context.error()
。- 异步
nuxtServerInit
操作必须返回Promise来通知nuxt
服务器等待它们。