js 操作vuex数据_在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: ''

});

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

以上是本章全部内容