vuex使用文档

vue旨在减少全局的请求次数,但是不常常使用,以此列下使用文档,官方文档案例不是很健全,以此有了下文.

1.使用

import { mapGetters } from "vuex";
computed: {
    ...mapGetters("Crumbs", ["getCrumbs"]),
    ...mapGetters("MenuActive", ["getMenuActive"]),
},

2.封装模块化一个文件crumbs.ts

interface CrumbsState {
    crumbs: string;
}

const state: CrumbsState = { crumbs: '' };

const getters = {
    getCrumbs: (state: CrumbsState) => () => {
        return state.crumbs;
    }
}

const actions = {
    updateState(context: any, payload: string) {
        context.commit('updateState', payload);
    }
}

const mutations = {
    updateState(state: CrumbsState, payload: string) {
        state.crumbs = payload;
    }
}

export default {
    namespaced: true,
    state,
    getters,
    actions,
    mutations
}

3.模块化导出

import { createStore } from 'vuex';
import Crumbs from "./modules/crumbs";
import MenuActive from "./modules/menu-active";

export default createStore({
  modules: {
    Crumbs,
    MenuActive
  }
})