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 Almacena
captadores de estado . Después de procesar miembros en estado, se pasan a
mutaciones externas . Operaciones en miembros de estado (agregar, eliminar, modificar, etc.)
acciones en
módulos de operaciones asincrónicas Gestión de estado modular
La diferencia entre acciones y mutaciones.
Las acciones presentadas son mutaciones, en lugar de cambiar directamente el estado.
Las acciones pueden contener cualquier operación asincrónica, usando el método de envío, las
mutaciones solo pueden ser operaciones sincrónicas, usando el compromiso para modificar directamente el valor en el estado
let value ={
name:'nick',age:18 }
this.$store.commit("saveInfo",value)
this.$store.dispatch('viewInfo',123).then(()=>{
})
El problema de actualizar los datos de la página en vuex desaparecerá
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))
}
}