在vue中使用vuex和sessionStorage管理数据

安装 vuex

npm install vuex --save

vuex安装完成之后，在src文件下建个store文件夹下建个index.js

main.js文件下注册：

//实例化 store
import store from './store/index.js'  

new Vue({
  el: '#app',
  store,   //实例化 store
  router,
  components: { App },
  template: '<App/>'
});

index.js文件如下：

我写了两个方法，建议第二种

import Vue from 'vue';
import vuex from 'vuex';

Vue.use(vuex);

export default new vuex.Store({
  //数据
  state: {
    //第一种方式
    userInfo: {
      fileBizTypeName: '',
      fileSensitiveLevel: '',
      sensitiveNum: '',
      category: '',
    },
    //第二种方式
    linkInfo: sessionStorage.getItem('linkInfo') && JSON.parse(sessionStorage.getItem('linkInfo')) || {
      fileBizTypeName: '',
      fileSensitiveLevel: '',
      sensitiveNum: '',
      category: '',
    },
  },
  //store 的计算属性
  getters: {
    //第一种方式
    getRsaStorage(state) {
      if(state.userInfo.fileBizTypeName == ''){
        state.userInfo.fileBizTypeName = sessionStorage.getItem('fileBizTypeName');
        state.userInfo.fileSensitiveLevel = sessionStorage.getItem('fileSensitiveLevel');
        state.userInfo.sensitiveNum = sessionStorage.getItem('sensitiveNum');
        state.userInfo.category = sessionStorage.getItem('category');
      }
      return state.userInfo;
    }
  },
  //mutation 非常类似于事件
  mutations: {
    //第一种方式
    //sessionStorage 存储
    setStorage(state, userInfo) {
      state.userInfo.fileBizTypeName = userInfo.fileBizTypeName;
      state.userInfo.fileSensitiveLevel = userInfo.fileSensitiveLevel;
      state.userInfo.sensitiveNum = userInfo.sensitiveNum;
      state.userInfo.category = userInfo.category;
      sessionStorage.setItem('fileBizTypeName', userInfo.fileBizTypeName);
      sessionStorage.setItem('fileSensitiveLevel', userInfo.fileSensitiveLevel);
      sessionStorage.setItem('sensitiveNum', userInfo.sensitiveNum);
      sessionStorage.setItem('category', userInfo.category);
    },
      //第二种方式
    $_setLinkInfo(state, linkInfo){
      state.linkInfo.fileBizTypeName = linkInfo.fileBizTypeName;
      state.linkInfo.fileSensitiveLevel = linkInfo.fileSensitiveLevel;
      state.linkInfo.sensitiveNum = linkInfo.sensitiveNum;
      state.linkInfo.category = linkInfo.category;
      sessionStorage.setItem('linkInfo',JSON.stringify(state.linkInfo));
    },
    //sessionStorage 清空
    setRemove(state){
      //第一种方式
      sessionStorage.removeItem('fileBizTypeName');
      sessionStorage.removeItem('fileSensitiveLevel');
      sessionStorage.removeItem('sensitiveNum');
      sessionStorage.removeItem('category');

      state.userInfo= {
        fileBizTypeName: '',
        fileSensitiveLevel: '',
        sensitiveNum: '',
        category: '',
        };

  

      //第二种方式清空
      sessionStorage.removeItem('linkInfo');
      state.linkInfo= {
        fileBizTypeName: '',
        fileSensitiveLevel: '',
        sensitiveNum: '',
        category: '',
        };
    }
  },

})

然后在你需要的页面存储数据

this.$store.commit("setStorage", type); //第一种方式存
this.$store.commit('$_setLinkInfo', type);//第二种方式存

最后在你需要的页面取出数据

this.$store.getters.getRsaStorage.fileBizTypeName //第一种方式取
this.linkInfo.sensitiveNum //第二种方式取

需要注意的是第二种方式我用了computed计算属性

  //第二种方式中对这个数据对象计算
    computed:{
      linkInfo(){
        return this.$store.state.linkInfo;
      },
    },

另外清空的是

this.$store.commit(‘setRemove’);

以上是本章全部内容