vue页面刷新时，vuex的mutation数据为undefide

原因：页面刷新时，（vuex）store数据在运行内存中，页面重新加载vue实例，store数据重新赋值，而我的store的state数据最初是undefied,没有触发调用mutation给其修改

页面渲染： mutations --> store --> create

解决:在最初渲染时(create)就触发mutation同时缓存

vuex

<!--.vue中javascript-->
//如果你的state数据在stote文件中
this.$store.state.stateDataName //获取vuex中state里名为stateDataName的数据
this.$store.commit('STATEDATANAME',getValue)//传输值getValue给mutation中的STATEDATANAME，


<!--mutations-->
STATEDATANAME:(sate,data)=>{
    //这里的state:vuex中state,data:你传输过来的数据
    state.stateDataName = data;//你传输(data)给mutation的数据（data）赋值给state，mutation数据与state数据产生关联
}
//如果你在mutation声明该值与state的关系，则调用是：this.$store.state里面
//没有声明则是在：this.$store.vm里面

vuex中state

公共数据状态，更改状态唯一方法mutation

//.vue页面中读取vuex的state数据
//1.使用插件 mapState
import {mapState} from 'vuex';
computed:{
    ...mapState({
    getState:state => state.stateData
})
}
//2.直接读取
computed(){
    getState:{
        return this.$store.state.stateData
    }
}

vuex中mutation

mutation 修改vuex数据,搭档：state

<!--vuex的mutation-->
mutation:{
    amend(state,data){
     state.StateData=data //可以进行运算 eg:state.StateData+=10
    }
}
<!--.vue文件js-->
this.$store.commit('amend',data)

storage 缓存

缓存： cookie sessionStorage localStorage ;你添加新的缓存（setItem）-缓存的值是JSON模式，读取缓存时(getItem)-缓存的值是字符串模式

sessionStorage 会话缓存

sessionStorage 页面刷新不会影响它，只有页面会话结束(页面关闭)才会数据清除；使用于你公用的（多次使用的||多个页面需要），比如vuex中state数据

window.sessionStorage; //页面的会话缓存数据
//ps:keyname:相当于对象中的name,keyValue：相当于对象中的name对应的value，eg:let o = {name:value}
sessionStorage.setItem(keyName，keyValue);//在会话中添加键keyname和键值keyValue
sessionStorage.keyname =JSON.stringify(updataKeyValue);//修改会话中存在的键keyname的值
sessionStorage.getItem(keyName);//读取会话中keyname
JSON.parse(sessionStorage.getItem(name));//读取会话中kyename转换为字符串，便于vuex中直接赋值给state
sessionStorage.removeItem('keyName')//删除会话中keyname
sessionStorage.clear();//删除会话中所有的键（值）

localStorage 本地缓存

localStorage 无论你关闭还是刷新只要不是去清空缓存（历史记录清空），它就在；适用于登录信息等常用贯穿整个项目的信息

window.localStorage;//页面本地缓存数据
localStorage.setItem(keyName,keyValue);
localStorage.getItem(keyName);
localStorage.removeItem('keyName')
localStorage.clear()

JSON

//将js对象||值转换为JSON字符串
JSON.stringify(data) 
//解析JSON字符串
JSON.parse(data)