commit传值的时候,传递false总是失败,不知道原因,如果有前辈知道,还请指教
==持久化步骤:首先要保证vuex中的数据在修改之前,先保存在localStorage或者sessionStorage中==
其次需要异步更新vuex中的同步任务,来达到更新state中的值
总结也就是通过 异步调用事前存在浏览器中的值,来同步更新vuex中的state的值,使得vuex中的数据不因为浏览器的刷新而丢失;
说的抽象,代码演示:
vuex中定义3个函数:
js
state: {
isface: false,
},
mutations: {
//主要的函数,操作之后,需要存储在浏览器
setIsFace (state, face) {
state['isface'] = face
if(face){
window.sessionStorage.isface =JSON.stringify(face)
}
},
//异步更新的时候调用,目的为了同步更改state
setFaceState (state, status) {
state['isface'] = status
}
},
actions: {
// 异步函数:数据发生变化,需要更新的时候调用
loadFaceStatus({ commit }){
let faceStatus = JSON.parse(window.sessionStorage.isface)
commit('setFaceState', faceStatus)
}
},
页面刷新需要获取最新数据时候:
js
import { useStore } from 'vuex'
setup() {
const store = useStore()
onMounted(() => {
store.dispatch('loadFaceStatus')
console.log('face', store.state.isface)
state.faceCheck = store.state.isface
})
}
更新数据:操作vuex中数据的组件使用:就是在此处,不能传 false 值
java
store.commit('setIsFace', true)