vue3中修改vuex中state中的数据

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)
	}
}