Vuex相关知识存数据取数据,页面刷新Vuex的数据消失问题

1.Vuex全局状态管理

这个文件是vuex的安装路径store/index.js
以下的代码全是直接网页中编辑的，格式有一些问题

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export defulat new Vuex.Store({
state:{
 user:{
 name:'用户'
}
//在其他页面需要用到这个数据时 可以直接{{$store.state.user.name}}或者在计算属性中声明一下再使用
},//数据源保存基本的数据
getters:{
updategetuser(state){
return state.user.name='新的数据'
}
},//保存受State影响的数据
mutations:{
updateuser(state,name){
state.user.name=name;
//这个name是自己在其他页面调用该函数穿的新数据
//在其页面的methods钩子中 使用 this.$state.commit('updateuser','要传递的新数据')
}
},//保存修改state数据中的方法（同步阻塞）
actions:{
asyncupdate(context,name){//这里支持异步操作
//第一个参数是必须的代表上下文
//这里用定时器来模拟异步
setTimeout(()=>{
context.commit('updateuser',name)
},1000)
//在其他页面的methods总使用 this.$store.dispatch('asyncupdate','要传递的新数据')
}
},//保存修改state数据中的方法（异步）
modules:{}//这是模块化时会用到
})

这里是随便的一个vue页面

<template>
/*第一种使用vuex中数据的方法*/
<div>{{$store.state.user.name}}</div>
//第二种在计算属性中声明后使用
<div>{{name}}</div>
//拿取gettres修改的数据
<div>{{$store.getters.updategetuser}}</div>
//在计算属性中的getters修改的属性
<div>{{getname}}</div>
//修改vuex中存储的数据
<button @click='hdclick'>同步mutations</button>
<button @click='hdasyncclick'>异步actions</button>
</template>
<script>
export defalt{
data(){
return{
name:'新用户'
}
},
computed:{
 //拿到vuex中属性
 name(){
 return this.$store.state.user.name
 },
 getname(){
return this.$store.getters.updategetuser
}
},
methods:{
hdclick(){
this.commit('updatename',this.name);//传递 新用户  数据
},
hdasyncclick(){
this.disparch('asncupdate','新用户2')
}
}
}
</script>
<style></style>

2.解决页面刷新Vuex的数据消失的问题

思路: 在App.vue页面监听页面是否刷新，如果页面刷新了，将state对象存入到sessionStorage中，页面打开之后，判断sessionStorage中是否存在state对象，如哦存在则说明页面时被刷新过的，将sessionStorage中存的数据给vuex中state赋值，如果不存在，说明是第一次打开则取vux中定义的state初始值

<template>
//这里时App.vue文件
</template>
<script>
export defalt{
name:'App'
data(){
return{

}
},
mounted(){
//监听页面是否刷新了,如果刷新了就把Vuex中的数据存一份给sessionStorage
window.addEventListener('unload',this.saveState)
},
methods:{
//这里是就是把vuex中的数据存一份到sessionStorage中，
//当vuex中的数据被刷新了我们就可以再从sessionStorage中拿一份再赋值给vuex
saveState(){
sessionStorage.setItem('state',JSON.stringify(this.$store.state))
},

}
}
</script>
<style></style>

//这里时store/index.js就是vuex所在的文件
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
//解决页面刷新vuex数据消失的问题
//这个写法 三目运算符  如果state=空不等于sessionStorage中的值（也就是没有数据说名是页面刷新了）
//就让他等于sessionStorage中的值，如果state第一次加载不存在就直接等于默认的值
const state=null!=window.sessionStorage.getIem('state')?JSON.parse(window.sessiongetItem('state')):{
 user:{
 name:'用户'
}
//在其他页面需要用到这个数据时 可以直接{{$store.state.user.name}}或者在计算属性中声明一下再使用
},//数据源保存基本的数据
const getters={
updategetuser(state){
return state.user.name='新的数据'
}
},//保存受State影响的数据
const mutations={
updateuser(state,name){
state.user.name=name;
//这个name是自己在其他页面调用该函数穿的新数据
//在其页面的methods钩子中 使用 this.$state.commit('updateuser','要传递的新数据')
}
},//保存修改state数据中的方法（同步阻塞）
actions={
asyncupdate(context,name){//这里支持异步操作
//第一个参数是必须的代表上下文
//这里用定时器来模拟异步
setTimeout(()=>{
context.commit('updateuser',name)
},1000)
//在其他页面的methods总使用 this.$store.dispatch('asyncupdate','要传递的新数据')
}
},//保存修改state数据中的方法（异步）
modules={}//这是模块化时会用到
export defulat new Vuex.Store({
state,
getters,
mutations,
actions
})