Vuex 命名空间模块结构项目教程

1. 项目的目录结构及介绍

vuex-namespaced-module-structure/
├── src/
│   ├── assets/
│   ├── components/
│   ├── modules/
│   │   ├── moduleA/
│   │   │   ├── actions.js
│   │   │   ├── getters.js
│   │   │   ├── index.js
│   │   │   ├── mutations.js
│   │   │   └── state.js
│   │   ├── moduleB/
│   │   │   ├── actions.js
│   │   │   ├── getters.js
│   │   │   ├── index.js
│   │   │   ├── mutations.js
│   │   │   └── state.js
│   │   └── ...
│   ├── router/
│   ├── store/
│   │   ├── index.js
│   │   └── ...
│   ├── App.vue
│   └── main.js
├── public/
├── package.json
├── README.md
└── ...

目录结构介绍

• src/: 项目的主要源代码目录。
  • assets/: 存放静态资源文件，如图片、字体等。
  • components/: 存放Vue组件文件。
  • modules/: 存放Vuex模块文件，每个模块都有自己的actions.js、getters.js、index.js、mutations.js和state.js。
  • router/: 存放Vue Router配置文件。
  • store/: 存放Vuex的根配置文件index.js。
  • App.vue: 项目的根组件。
  • main.js: 项目的入口文件。
• public/: 存放公共资源文件，如index.html。
• package.json: 项目的依赖配置文件。
• README.md: 项目的说明文档。

2. 项目的启动文件介绍

main.js

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app');

文件介绍

• Vue.config.productionTip = false: 关闭生产环境提示。
• new Vue({...}): 创建Vue实例，挂载到#app元素上。
• router: 引入Vue Router配置。
• store: 引入Vuex配置。
• render: h => h(App): 渲染根组件App.vue。

3. 项目的配置文件介绍

package.json

{
  "name": "vuex-namespaced-module-structure",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "vue": "^2.5.2",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.5.0",
    "@vue/cli-plugin-eslint": "^4.5.0",
    "@vue/cli-service": "^4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  }
}

文件介绍

• name: 项目名称。
• version: 项目版本。
• private: 是否为私有项目。
• scripts: 定义了项目的启动、构建和代码检查命令。
• dependencies: 项目运行时的依赖包。
• devDependencies: 项目开发时的依赖包。

store/index.js

import Vue from 'vue';
import Vuex from 'vuex';
import moduleA from '../modules/moduleA';
import moduleB from '../modules/moduleB';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    moduleA,
    moduleB
  }
});

文件介绍

• Vue.use(Vuex): 安装Vuex插件。
• new Vuex.Store({...}): 创建Vuex存储实例，并引入模块moduleA和moduleB。
• modules: 定义了Vuex的模块，每个模块都有自己的命名空间。

通过以上介绍，您可以更好地理解和使用vuex-namespaced-module-structure项目。