在vue-element-admin中使用Vuex

參考：

vuex官方文檔

https://vuex.vuejs.org/zh/

 

Vuex快速使用

https://mp.weixin.qq.com/s/OnVcgBQlSLHiR12WXN5nbQ

 

模塊化用到的 require.context

https://juejin.im/post/6844903583113019405 

 

vue element admin教程

https://juejin.im/post/6844903840626507784#heading-29

 

 

在vue-element-admin中，已模塊化

 

例如，要新增routePoint.js

src/store/getter.js

const getters = {
  sidebar: (state) => state.app.sidebar,
  size: (state) => state.app.size,
  device: (state) => state.app.device,
  visitedViews: (state) => state.tagsView.visitedViews,
  cachedViews: (state) => state.tagsView.cachedViews,
  token: (state) => state.user.token,
  avatar: (state) => state.user.avatar,
  name: (state) => state.user.name,
  userId: (state) => state.user.userId,
  nickName: (state) => state.user.nickName,
  introduction: (state) => state.user.introduction,
  roles: (state) => state.user.roles,
  permission_routes: (state) => state.permission.routes,
  errorLogs: (state) => state.errorLog.logs,

  // 新增
  lastRoutePointListObj: (state) => state.routePoint.lastRoutePointListObj,
};
export default getters;

 

src/store/modules/routePoint.js

import {
    getRouteRealTimeNumber,
} from '@/api/route';

const state = {
    lastRoutePointListObj: {
        data: [],
        timestamp: '',
    },
};

const mutations = {
    SET_LAST_ROUTE_POINT_LIST_OBJ: (state, lastRoutePointListObj) => {
        const { data, timestamp } = lastRoutePointListObj;
        state.lastRoutePointListObj.data = data;
        state.lastRoutePointListObj.timestamp = timestamp;
    },
};

const actions = {
    setLastRoutePointListObj({ commit }, lastRoutePointListObj) {
        commit('SET_LAST_ROUTE_POINT_LIST_OBJ', lastRoutePointListObj);
    },
};

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

 

在組件xx.vue中使用

// 賦值
this.$store.dispatch("routePoint/setLastRoutePointListObj", {
        data: [1,2,3],
        timestamp: new Date().getTime(),
      });

// 獲取值
console.log(this.$store.getters.lastRoutePointListObj)