Vuex 模块化开发，更好维护

除了一级大仓库需要new Vuex.Store({})   ，    其余仅仓库对象，不再需要new 。

步骤一：安装vuex插件 

    cnpm install vuex@3 -S     注意版本对应：vue2安装vuex@3    vue3安装vuex@4

步骤二：创建 src/store/index.js   一级大仓库

import Vuex from 'vuex'; //引入插件
import Vue from 'vue';
Vue.use(Vuex); // Vue要使用该插件

//创建最大（一级）仓库
export default new Vuex.Store({
    
})

步骤三：搭建二级仓库对象，src/store/home/index.js  和 src/store/search/index.js ...

 

二级仓库代码为

//src/home/index.js  home模块二级小仓库
 
//state：仓库存储数据的地方
const state={};

//actions:编写业务代码，也可以与数据库交互
const actions={};

//mutations:修改state数据唯一手段
const mutations={};

//getters: 针对state数据的计算属性，可以对源数据固定换算
const getters={}

//创建二级仓库（ 不需要new Vue.Store()）,并暴露出去
export default{
    state,
    actions,
    mutations,
    getters,
} 

步骤四：一级大仓库中，import 引入二级仓库对象。

并在配置项 modules：{[二级对象1，二级对象2，...]}

import Vuex from 'vuex';
import Vue from 'vue';
Vue.use(Vuex);

import homeStore from './home';
import searchStore from './search'

export default new Vuex.Store({
    modules:{
        homeStore,
        searchStore,
    }
})

步骤五：在main.js中，全局引入一级大仓库，并注册生成实例属性 $store

//引入vuex仓库（集中式数据管理）全局使用
import store from './store'

new Vue({
  render: h => h(App),
  router,
  store,//注册仓库，使组件实例身上多了$store属性
}).$mount('#app')