vue vuex状态管理

1、利用npm下载vuex包，在命令行工具中输入以下命令,cd到你的项目目录

npm install vuex --save

2、在src下新建一个名叫store的文件夹，用App.js同级，并在文件夹下新建store.js文件。因为store.js是基于vue的，所以需要引入vue和vuex

import Vue from ‘vue’
import Vuex from ‘vuex’

3、使用vue全家桶的任何一个都需要进行use一下，所以vuex也不例外

Vue.use(Vuex);

4、保存状态

this.$store.commit(“loginState”,value);

5、存储状态

import Vue from ‘vue’
import Vuex from ‘vuex’
Vue.use(Vuex);
const store = new Vuex.Store({
state:{
loginState:’’,
},
mutations:{
loginState:function(state,login){
state.loginState = login;
},
}
});
export default store

6、获取状态

this.loginState = this.$route.params.loginState;

7、缺点不能刷新页面 解决方案,app.vue中加入以下代码

export default {
name: ‘App’,
created () {
//在页面加载时读取sessionStorage里的状态信息
if (sessionStorage.getItem(“store”) ) {
this.$store.replaceState(Object.assign(,this.$store.state,JSON.parse(sessionStorage.getItem(“store”))))
}
//在页面刷新时将vuex里的信息保存到sessionStorage里
window.addEventListener(“beforeunload”,()=>{
sessionStorage.setItem(“store”,JSON.stringify(this.$store.state))
})
}
}

参考链接:https://blog.csdn.net/guzhao593/article/details/81435342