vuex实现模块化分割,在不同类别的文件中放置对应的数据及操作

目录结构为
--
store文件夹下有index.js 、modules文件夹,在modules文件夹下是你的模块,最好通过功能命名
一级目录:store
一级目录下文件:index.js
二级目录:modules
三级目录demo
三级目录下文件demo.js
三级目录下文件getter.js
三级目录下文件mutations.js
三级目录下文件 state,js

各文件的内容为
一级目录下index.js

```javascript
import Vue from 'vue'
import Vuex from 'vuex'

import demo from './modules/demo/demo.js';

 

Vue.use(Vuex);


const $store = new Vuex.Store({
  modules: {
    demo
  }
});
export default $store;
```
三级目录下demo.js

```javascript
import state from './state.js';
import mutations from './mutations.js';
// 按需要导入
// import getters from './getters.js';
// import actions from './actions.js';

export default{
// 将导入的文件暴露出去
state,
mutations

}

```
三级目录其他文件

```javascript
export default{}
```
最后在main.js中挂载

```javascript
import Vue from 'vue'
import App from './App'
import router from './router'
import { RouterMount } from 'uni-simple-router'
//引入vuex
import store from './store'
//把vuex定义成全局组件
Vue.prototype.$store = store

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
store,
...App
})
app.$mount();
```

posted @ 2020-08-13 11:22  北栀丶  阅读(358)  评论(0)    收藏  举报