Vuex模块化配置

记录学习开发中碰到的Vuex模块化开发及使用
基于vue-cli开发

1.安装并使用vuex，这里安装的是3以上的版本，4的配置项不同

  npm install vuex@3.x --save

2.配置 /store/index.js 总仓库

import Vue from 'vue';
import Vuex from 'vuex';
//vuex 模块式开发
Vue.use(Vuex);

/* 引入小仓库 */
import home from './home'
import search from './search'

//对外暴露store类的一个实例 Store要大写
export default new Vuex.Store({
    //实现Vuex仓库模块式开发存储数据
    modules:{
        home,
        search
    }
});

3.配置模块独立仓库 也就是在store下新建各个组件自己的仓库配置，
比如在/store/home/index.js,然后通过总仓库modules引入总仓库管理

//state : 仓库存储数据的地方
const state = {};

//mutations ：修改state的唯一手段
const mutations = {};

//actions 处理actions,可以写自己的业务，也可以处理异步
const actions = {};

//getters: 理解为计算属性，用于简化仓库数据，让组件获取仓库数据更加方便
const getters = {};

export default {
    state,
    mutations,
    actions,
    getters,
}

4.在main.js中注册Store.让组件实例上带有$store属性

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

/* 引入路由 */
import router from '@/router'

 引入仓库
import store from './store';//

import TypeNav from '@/components/TypeNav';
/* 将三级联动菜单组件注册为全局组件 */
Vue.component(TypeNav.name,TypeNav)

new Vue({
  render: h => h(App),
  //注册路由信息，当这里书写router的时候，组件身上都拥有了$router,$route属性
  router,
  //注册store，组件身上多了$store属性
  store,
}).$mount('#app')

至此vuex 模块化开发配置完成