vue3中修改vuex中state中的数据
开发vue3项目
·
vue3中修改vuex中state中的数据
1.直接通过store.state修改
如 :
//vuex文件
import { createStore } from 'vuex'
export default createStore({
state: {
fullscreenLoading: false // 全屏加载
},
getters: {
},
mutations: {
},
actions: {
},
modules: {
}
})
// 组件
import { useStore } from 'vuex'
export default {
setup() {
// vuex
const store = useStore()
//直接修改
store.state.fullscreenLoading = true
}
}
但是并不推荐直接修改的方式
因为state是实时更新的,直接修改是能够异步操作的,当执行了异步操作,会导致其他使用state数据的程序出现问题,所以我们开发过程中更倾向于使用mutations加commit方式进行state数据的改变,通过mutations限制了异步操作
2.使用commit触发Mutations操作修改
//vuex文件
import { createStore } from 'vuex'
export default createStore({
state: {
fullscreenLoading: false // 全屏加载
},
getters: {
},
mutations: {
updateFullLoading(state, status){
state.fullscreenLoading = status
}
},
actions: {
},
modules: {
}
})
// 组件
import { useStore } from 'vuex'
export default {
setup() {
// vuex
const store = useStore()
// mutaions修改
store.commit('updateFullLoading', true)
}
}
更多推荐
已为社区贡献2条内容
所有评论(0)