在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’);

以上是本章全部內容