vue中使用vuex

 const store = new Vuex.Store({
      state: {
         obj:{}
      },
      getters: {
         nameInfo(state,getter){
        	return "姓名:" + state.obj.name
      	 },
      	  //第二个参数getters用于将getters下的其他对象拿来用
      	 fullInfo(state,getters){
        	return getters.nameInfo + '年龄:' + state.obj.age
    	 } 
      },
      mutations: {
         saveInfo(state,value){
            //state里为初始值,value为你要存的值
            state.obj= value
         },
      },
      actions: {
		//context(上下文)：commit,dispatch,state,rootState,getters,rootGetters
      	 async viewInfo(context, id){
            const { data } = await axios.get(`/api/residueDegree?id=${id}`)
      		if (data.code === "0000") {
        	   context.commit("saveInfo", data.data)
      		}
      		return data
         }
	  }
  })

//获取值
this.$store.state.obj
this.$store.getters.fullInfo

state 存放状态
getters 对state中的成员加工后传递给外界
mutations 对state成员操作（对数据的增加、删除、修改等等）
actions 对异步进行操作
modules 模块化状态管理

actions 与mutations区别

actions 提交的是 mutations，而不是直接变更状态。
actions 可以包含任意异步操作，使用dispatch方法，
mutation只能是同步操作，使用commit直接修改state里的值

let value ={ name:'nick',age:18 }
this.$store.commit("saveInfo",value)
this.$store.dispatch('viewInfo',123).then(()=>{})

vuex中刷新页面数据会消失问题

const store = new Vuex.Store({
    state:sessionStorage.getItem('state') ? JSON.parse(sessionStorage.getItem('state')): {
       name:""
       age:''
    }
})
mounted() {
    window.addEventListener('beforeunload', this.saveState)
},
methods: {
    saveState() {
        sessionStorage.setItem('state', JSON.stringify(this.$store.state))
    }
}