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() {// vuexconst 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() {// vuexconst store = useStore()// mutaions修改store.commit('updateFullLoading', true)}
}

vue3中修改vuex中state中的数据相关推荐

actions vuex 请求_vue中在vuex的actions中请求数据实例
我废话不多说了,直接上代码吧! actions.js getCertificationStatus(context, {vm:vm,type:type}){ return new Promise((r ...
Vuex---在 Vue 组件中获得 Vuex 状态state
Vuex使用单一状态树(一个对象就包含了全部的应用层级状态),它作为唯一数据源存在,每个应用仅仅有一个store实例. 单一状态树使得我们能够直接定位任一特定的状态片段,在调试过程中也能轻易地取得整个 ...
在vue组件中使用vuex的state状态对象的5种方式
下面是store文件夹下的state.js和index.js内容 state.js //state.js const state = {headerBgOpacity:0,loginStatus:0, ...
MFC中修改静态文本框中文字的字体、颜色
假设有一个静态文本框控件,其ID为:IDC_STATIC_XSDJ,且关联一个control类的CStatic类型的变量m_static_xsdj. 设置字体时自然要用到CFont类,下面介绍两种方法 ...
怎么看vue中某个插件是否安装成功_如何在谷歌中查看VUEX（谷歌浏览器中安装 vue调试工具 vue-devtools）...
本次介绍了两种方法,第一种方法略微复杂,想追求效率的请查看第二种. 20200214141007961.png 如果你在使用vue开发项目浏览器中没有安装vue调试工具显然不能算是一个合格的vue ...
struts升级：FileUploadInterceptor在struts 2.3.14.2的jar中修改了方法acceptFile中的参数
低版本 @Override protected boolean acceptFile(Object action, File file, String filename, String con ...
在vue项目中引入vuex(全局状态管理器)
目录 Vuex是什么? State Getter Mutation Action Module 项目结构 Vuex是什么? Vuex是一个专为Vue.js应用程序开发的状态管理模式.它采用集中式存储管 ...
vue中拿到接口，并获取数据，渲染到页面
首先index.html完成的是单页面展示,app.vue里面已经写了视图出口, 例如;先新建一个role.vue页面,写上相应的布局和内容,然后在路由中添加这个页面. 然后开始写渲染数据的方法前提 ...
解决this._data.$$state...“Error: [vuex] do not mutate vuex store state outside mutation handlers.“ 报错
今天遇到了这样一个报错: [Vue warn]: Error in callback for watcher "function () {return this._data.$$state; ...

vue3中修改vuex中state中的数据

vue3中修改vuex中state中的数据

1.直接通过store.state修改

2.使用commit触发Mutations操作修改

vue3中修改vuex中state中的数据相关推荐

最新文章

热门文章