storegather 将 store 分散存放在每个页面中,如 在src下新建pages目录 pages/home

home.vue 页面 存放在 home 目录下

state.js

export default {
      count:0 , // 页面计数
      goods:[
         {'id':1,'name':'产品1','type':'hot'},
         {'id':2,'name':'产品2','type':'put'},
         {'id':3,'name':'产品3','type':'hot'},
         {'id':4,'name':'产品4','type':'hot'},
         {'id':5,'name':'产品5','type':'put'},
         {'id':6,'name':'产品6','type':'hot'},
      ]
}

mutations.js

export default {
      add(state){
         state.count +=1;
      },
      minus(state){
         state.count -=1;
      },
      pushgoods(state,newgoods){
          newgoods.forEach((item)=>{
             state.goods.push(newgoods[i]);
          })
      }
}

getters.js

export default {
      hotgoods(state){ // 热销产品
         return state.goods.filter(good => good.type === 'hot')
      }
}

actions.js

export default {
      async getInfo({commit},arg){
         let {data} = await axios.get('http://www.xxx.com/getgoods?type=json');
         commit('pushgoods',data);
      }
}

按照以上的设计规则,就是将store分散到每个页面的目录下,思路更清晰,每个页面调用的方法,挂载的全局变量,回到当前页面进行修改

分散后,就要分别进行合并,有两个思路

1)在当前页面新建一个集合文件 (gather.js) 推荐

import state from './state.js'
import mutations from './mutations.js'
import getters from './getters.js'
import actions from './actions.js'
export default {
   state,
   mutations,
   getters,
   actions
}

2)分别将每个页面引入到main.js 中

例子:

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

// 分散集合store模块
import {Gather,store} from 'storegather';

*********方法1*************
import homeGather from './pages/home/gather.js';
// ... 不停地添加页面进来...
Gather.setState(homeGather.state,...) // xxx1,xxx2,xxx3 如此类推
Gather.setMutations(homeGather.mutations,...)
Gather.setGetters(homeGather.getters,...)
Gather.setActions(homeGather.actions,...)
**********************

*********方法2*************
import homeState from './pages/home/state.js';
import homeMutations from './pages/home/mutations.js';
import homeGetters from './pages/home/getters.js';
import homeActions from './pages/home/actions.js';
// ... 不停地添加页面进来...
Gather.setState(homeState,...) // xxx1,xxx2,xxx3 如此类推
Gather.setMutations(homeMutations,...)
Gather.setGetters(homeGetters,...)
Gather.setActions(homeActions,...)
**********************

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

安装

npm install storegather --save

// 需要配合 vue vuex npm install vue vuex --save

在main.js中使用

// Gather 集合好,就会返回一个已经集合好的store模块 并且已经new Vuex.Store({已经集合好了}) import {Gather,store} from 'storegather'

Gather.setState(homeState,...) // xxx1,xxx2,xxx3 如此类推 Gather.setMutations(homeMutations,...) Gather.setGetters(homeGetters,...) Gather.setActions(homeActions,...)

new Vue({ el: '#app', router, store, components: { App }, template: '' })