• 在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)
    
  • 相关阅读:
    内存溢出
    接手新业务
    pjb fabu
    中文手册
    人背的时候,做啥都失败
    帮助开发人员学习
    python中的__dict__,__getattr__,__setattr__
    NetCore在Docker中发布及运行
    ELK基础配置
    IdentityServer4 手动验签及日志记录
  • 原文地址:https://www.cnblogs.com/ycc1/p/vuex01.html
Copyright © 2020-2023  润新知