文章目录
- 一、项目结构
- 二、严格模式
- 三、表单处理
- 1、出現的问题
- 2、解决办法
- 3、使用双向绑定的计算属性
- 四、测试
- 1、测试 Mutation
- 2、测试 Action
- 3、测试 Getter
- 4、执行测试
- 4.1 在 Node 中执行测试
- 4.2 在浏览器中测试
一、项目结构
Vuex
并不限制你的代码结构。但是,它规定了一些需要遵守的规则:
- 应用层级的状态应该集中到单个
store 对象
中。 - 提交
mutation
是更改状态的唯一方法,并且这个过程是同步的。 - 异步逻辑都应该封装到
action
里面。
只要你遵守以上规则,如何组织代码随你便。如果你的 store 文件
太大,只需将 action
、mutation
和 getter
分割到单独的文件。
对于大型应用,我们会希望把 Vuex
相关代码分割到模块中。下面是项目结构示例:
├── index.html
├── main.js
├── api
│ └── ... # 抽取出API请求
├── components
│ ├── App.vue
│ └── ...
└── store├── index.js <