Vuex的模块化用法以及本地存储

本文记录一下Veux的模块化实现方式以及vuex刷新会数据丢失来进行存储操作

1、Vuex的目录结构

• store：vuex的文件夹 跟main.js平级
• modules vuex各个模块的代码 state，actions，mutations
• getters 所有模块的数据
• index 实例化Vuex.Store以及暴露vuex模块

  ├── store
  │   ├── modules
  │   │   ├── user.js
  │   │   ├── permission.js
  │   ├── getters
  │   ├── index

  modules下的js，每个功能一个单独的js，比如登陆功能，用户数据等等

• user.js

  const user = {
      state: {
          token: getToken(),
          name: '',
          avatar: '',
          roles: []
      },
      actions:{
           //state对应state的值可以拿到做判断
           Login({ commit,state }, userInfo) {
              commit('SET_TOKEN')
           }
      },
      mutations: {
          SET_TOKEN: (state, token) => {
            state.token = token
          },
      }
  }
  export default user

  getters 所有modules中的state数据

• state.user.name（module文件中的user模块的state中的name数据）

  const getters = {
    token: state => state.user.token,
    avatar: state => state.user.avatar,
    name: state => state.user.name,
    roles: state => state.user.roles,
  }
  export default getters

  index.js Veux实例化

  import Vue from 'vue'
  import Vuex from 'vuex'
  Vue.use(Vuex)
   // logger是一个日志插件
  import logger from 'vuex/dist/logger';
  import num from './modules/num'
  import user from './modules/user'//用户登录
  import permission from './modules/permission'//根据权限生成路由列表
  import getters from './getters'
  // vuex的调试工具
  //npm run dev就是dev环境 npm run build的话环境就是production环境线上调试就关闭
  const debug = process.env.NODE_ENV !== 'production';
  
  // 创建 store 实例
  export default new Vuex.Store({
    strict: debug,
    plugins:debug ? [logger()]:'',
    modules: {
      user,
      num,
      permission
    },
    getters
  })

  Vuex的高级用法

• 官方文档 https://vuex.vuejs.org/guide/getters.html
• getters在页面this.messNum调用即可 如果没引入可$store.getters.messNum（有可能需要加模块name：$store.getters.uese.messNum）
• actions在页面this.LogOut({})没引入的话this.$store.dispatch(‘LogOut’)
• this.$store.commit()操作mutations

  import {mapGetters, mapMutations, mapActions} from 'vuex'
    export default {
        data(){
  
        },
        computed:{
         // 调用mapGetters的方法 this.messNum
          ...mapGetters([
             'messNum',
             'name',
             'avatar'
          ]),
          //简便用法
          routes() {
              return this.$store.state.messNum;
          },
        },
        methods: {
          // 调用actions的方法 this.LogOut({})
          ...mapActions([
            'LogOut'
            ,'...'
            ,'...'
          ]),
          ...mapMutations([
  
          ])
        }
    }

  ...mapGetters({
    //`this.doneCount` to `this.$store.getters.doneTodosCount`
    doneCount: 'doneTodosCount'
  })

  vuex本地存储

  state:{
     routes: ''
  },
  mutations:{
    initMenu(state, menus){
        state.routes = menus;
        sessionStorage.setItem('menus', JSON.stringify(menus));
     }
  },
  getters:{
      routes: (state) => {
          if (!state.menu.routes) {
              state.menu.routes = JSON.parse(sessionStorage.getItem('menus'))
          }
          return state.menu.routes
      }
  },

• 需要注意的是state里的routes初始化一定要是null，而不是{}/[]，否则那个判断就一直为true啦（个人遇到的一个小问题）

  vuex-persistedstate插件 本地存储解决更新后数据丢失的问题

  import createPersistedState from 'vuex-persistedstate'
  const store = new Vuex.Store({
    modules: {
  
    },
    getters,
    //加上plugins即可
    plugins: [createPersistedState()]
  });

  －　createPersistedState会影响动态路由以及权限路由 对路由拦截的判断有影响（因为数据不丢失了）

赏

谢谢你请我吃糖果

支付宝

微信