zoukankan      html  css  js  c++  java
  • 在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)
    
  • 相关阅读:
    bootstrap
    移动视口,以及适配
    CSS线性渐变
    css之什么是bfc
    css 深入进阶之定位和浮动三栏布局
    webpack 4 技术点记录
    jQuery的学习总结
    jQuery 知识大全
    JS高级进阶
    正则
  • 原文地址:https://www.cnblogs.com/ycc1/p/vuex01.html
Copyright © 2011-2022 走看看