VUE - vuex存储管理

VUE - vuex存储管理

 

1. 安装插件

yarn add vuex

 

 

2. 创建存储文件

　　在src目录下，创建 store 文件夹，创建 index.js 

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    viewPage: 1,
  },
  mutations: {
    // //切换地球显隐
    // TOGGLESHOWEARTH: (state, flag) => {
    //   state.map_isShowEarth = flag;
    // },

    SETVIEWPAGE: (state, tag) => {      
      state.viewPage = tag;
    },
  },
  actions: {
    //   async refreshDictLabels({ commit }) {
    //     const { data } = await api_GetDictionaryTreeAsyncModelIssusTag()
    //     const payload = data?.map((item) => {
    //         return {
    //             key: item.Id,
    //             title: item.Name,
    //             type: item.Remark || 'info',
    //         };
    //     })
    //     commit('SETVIEWPAGE', 2)
    // },
  },
  getters: {
    viewPage: (state) => state.viewPage,

    // hasNewComment(state) {
    // },
    // hasActiveComment(state) {
    //   return state.labels.some((item) => item.active);
    // },
  },
});

 

 

3. 全局引用

　　在main.js中引入

import store from "./store/";

  app = new Vue({
    router,
    store,
    render: (h) => h(App),
  }).$mount("#cde-task");

 

 

4. 使用

 　　在页面中使用：

import store from "@/store/";

//获取
let tt=store.state.viewPage;

//调用 mutations
store.commit("SETVIEWPAGE", 2);

//调用 actions
this.$store.dispatch('myAction', payload);

 

 

5. 监听

　　注意vuex 与vue版本，如版本不兼容，有可能监听不起做用

　　如vue2 需使用 vuex@3

  watch: {
    "$store.state.viewPage": {
      handler(val, valOld) {
        
        this.view = val;
      },
      deep: true,
      immediate: true,
    },
  },

 

 

6. store 分模块

 index.js 中

import Vue from 'vue';
import Vuex from 'vuex';

import app from './modules/app';
import router from './modules/router';
import global from './modules/global';
import business from './modules/business';

import getters from './getters';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    app,
    router,
    global, 
    business
  },
  state: {},
  mutations: {},
  actions: {},
  getters,
});

 

 

在store下创建modules文件夹，里面分别创建 app.js、router.js、global.js、business.js

 以business.js举例

import { resetREMScale } from '@/utils/util';
const global = {
  state: {
    showMenuFrame: false, //显示边框栏
    showToolDescribe: false,//显示工具栏描述
  },
  mutations: {
    toggleShowMenu: (state, flag) => {
      state.showMenuFrame = flag;
      resetREMScale(flag);//重置rem比例
    },
    TOGGLESHOWTOOLDESCRIBE: (state, flag) => {
      state.showToolDescribe = (flag != null ? flag : !state.showToolDescribe);
    },
  },
  actions: {
    toggleShowMenu({ commit }, flag) {
      commit('toggleShowMenu', flag);
    },
    showToolDescribe({ commit }, flag) {
      commit('TOGGLESHOWTOOLDESCRIBE', flag);
    },
  }
}
export default global;

 

 

在store下创建 getters.js

const getters = {
  showMenuFrame: state => state.global.showMenuFrame,
  showToolDescribe: state => state.global.showToolDescribe,
};

export default getters;

 

 

使用时需要加上模块名称

let tt=store.business.state.showMenuFrame;

 

 

 

end.