在vue-element-admin中使用Vuex
参考:
vuex官方文档
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)
赞 (0)