vuex目录配置

Posted 张氏码农之旅

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vuex目录配置相关的知识,希望对你有一定的参考价值。

vuex目录配置,即vue-cli开发时目录配置

项目结构

Vuex 并不限制你的代码结构。但是,它规定了一些需要遵守的规则:

  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
    ├── rootState.js        # 根级别的 state
    ├── getters.js      # 根级别的 gettes
   └── modules ├── cart.js # 购物车模块 └── products.js # 产品模块

以上是关于vuex目录配置的主要内容,如果未能解决你的问题,请参考以下文章

Vuex 环境配置

VSCode自定义代码片段13——Vue的状态大管家

VSCode自定义代码片段13——Vue的状态大管家

VSCode自定义代码片段13——Vue的状态大管家

VSCode 配置 用户自定义代码片段 自定义自动代码补充

Vuex