zoukankan      html  css  js  c++  java
  • 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.jsgetters.js。如果使用index.js来维护state,getters,actionsmutations,同时具有单个单独的操作文件,那么仍然可以正确识别该文件。

      在使用拆分文件模块时,必须记住使用箭头函数功能, this 在词法上可用。词法范围this意味着它总是指向引用箭头函数的所有者。如果未包含箭头函数,那么this将是未定义的(undefined)。解决方案是使用 "normal" 功能,该功能会将this指向自己的作用域,因此可以使用。

      (4)插件

      可以将其他插件添加到store(在模块模式下),将其放入store/index.js文件中。

      (5)fetch方法

      fetch 方法会在渲染页面前被调用,作用是填充状态树 (store) 数据,与 asyncData 方法类似,不同的是它不会设置组件的数据。

      (6)nuxtServerInit方法

      如果在状态树中指定了 nuxtServerInit 方法,Nuxt.js 调用它的时候会将页面的上下文对象作为第2个参数传给它(服务端调用时才会这样处理的)。当我们想将服务端的一些数据传到客户端时,这个方法是非常好用的。

    • context被赋予nuxtServerInit作为第二个参数,它与asyncDatafetch方法相同。
    • nuxtServerInit 方法接收的上下文对象和 fetch 的一样,但不包括 context.redirect() 和 context.error()
    • 异步nuxtServerInit操作必须返回Promise来通知nuxt服务器等待它们。
  • 相关阅读:
    迁移-Mongodb时间类数据比较的坑
    Kong在windows10的hyperV CentOS上安装
    C#文件上传编码乱码
    入职9个月感想
    单元测试遇到的Mock重载方法问题
    MongoDB wiredTiger存储引擎下的存储方式LSM和B-Tree比较
    【SQL Server】修改DB逻辑文件名称
    【winform】基于UserControl实现webBrower组件时html页面元素加载及onclick事件监听实现
    SQL server 数据连接池使用情况检测
    【Vue起步-Windows】N01:环境安装
  • 原文地址:https://www.cnblogs.com/bien94/p/12591863.html
Copyright © 2011-2022 走看看