vuex的模块化使用

首先下载vuex

npm i vuex

在src下新建store
新建home/index.js

//home模块的小仓库

const state = {
    b:1,
    c:3,
};

const mutations = {};

const actions = {};

const getters = {};

export default {
    state,
    mutations,
    actions,
    getters
}

新建search/index

const state = {
    c:2
};

const mutations = {};

const actions = {};

const getters = {};

export default {
    state,
    mutations,
    actions,
    getters
}

在store/index.js中进入这几个小的模块

import Vue from 'vue';
import Vuex from 'vuex';
//需要使用插件一次
Vue.use(Vuex);

// //state 仓库存储数据的地方
// const state = {
//     count:1
// };
// //mutations 修改state的唯一手段
// const mutations = {
//     ADD(state){
//         state.count++
//     }
// };
// //actions:处理actions 可以书写自己的业务逻辑 也可以处理一部请求
// const actions = {
//     //这里可以书写业务逻辑 但是不能修改store
//     add({commit}){
//         commit("ADD")
//     }
// };
// //getters: 理解为计算属性 用于简化仓库数据 让组件获取仓库的数据更加方便
// const getters = {};
 

//引入小模块
import home from './home'
import search from './search';

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

在main.js中注册全局

//引入仓库
import store from '../src/store/index'
new Vue({
  render: h => h(App),
  //注册仓库 组件实例身上会多了一个属性 $store
  store,
  //注册路由
  router
}).$mount('#app')

这样就可以在相应的组件中利用辅助函数进行获取数据

//辅助函数
// import { mapState} from 'vuex';

    computed:{
        ...mapState(['a'])
    },