NuxtJS项目——状态树

　　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服务器等待它们。