码迷,mamicode.com
首页 > 其他好文 > 详细

Vuex 综合

时间:2020-04-25 00:40:19      阅读:62      评论:0      收藏:0      [点我收藏+]

标签:nts   请求   api   文件   级别   env   main   vue   导出   

  1. 应用层级的状态应该集中到单个 store 对象中。
  2. 提交 mutation 是更改状态的唯一方法,并且这个过程是同步的。
  3. 异步逻辑都应该封装到 action 里面。

只要你遵守以上规则,如何组织代码随你便。

如果你的 store 文件太大,只需将 action、mutation 和 getter 分割到单独的文件。


对于大型应用,我们会希望把 Vuex 相关代码分割到模块中。下面是项目结构示例:

├── index.html
├── main.js
├── api
│   └── ... # 抽取出API请求
├── components
│   ├── App.vue
│   └── ...
└── store
    ├── index.js          # 我们组装模块并导出 store 的地方
    ├── actions.js        # 根级别的 action
    ├── mutations.js      # 根级别的 mutation
    └── modules
        ├── cart.js       # 购物车模块
        └── products.js   # 产品模块

开启严格模式,仅需在创建 store 的时候传入 strict: true
const store = new Vuex.Store({
  // ...
  strict: true
})
在严格模式下,无论何时发生了状态变更且不是由 mutation 函数引起的,将会抛出错误。
这能保证所有的状态变更都能被调试工具跟踪到
不要在发布环境下启用严格模式!以避免性能损失。
类似于插件,我们可以让构建工具来处理这种情况:
const store = new Vuex.Store({
  // ...
  strict: process.env.NODE_ENV !== ‘production‘
})

表单处理

Vuex 综合

标签:nts   请求   api   文件   级别   env   main   vue   导出   

原文地址:https://www.cnblogs.com/dzkjz/p/12771150.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!