Vue关于Vuex实现组件中数据的共享要点总结和部分代码

//Vuex和pinia一样都是把相应的数据和逻辑代码集中在一个js文件，然后import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'，和pinia的区别就是Vuex这里可以看到他多了mapGetters和mapMutations，mapState和mapGetters在对应vue的computed里面， mapMutations和?mapActions在methods里面

?...mapState('counter', ['count']),
? ?...mapGetters('counter', ['doubleCount']),

//这里的counter是在配置Vuex的js文件modules里面的命名

//modules将各独立的模块最终合并到根模块中来

import { createStore } from 'vuex'
import counterModule from './modules/counter'

const store = createStore({
? modules: {
? ? counter: counterModule,
? },
})

export default store

//mapState就代表js文件中的state下面的数据，mapGetters是getters下面要传递的计算属性，mapGetters是mutations里面传递的同步函数，mapActions是?actions传递的异步函数

//然后因为如果没有命名空间? namespaced: true,会暴露到全局，所以需要写上命名空间

//actions不能直接修改数据，需要提交到mutations里面修改，?contexts是代表?上下文对象，这个对象的结构与 store 的结构一致

//mutations里面要注意的是异步代码会生效，但是不在mutations里面执行,为了防止会紊乱我们的数据，需要在配置Vuex的js文件里面进行strict: true, // 开启严格模式

const counterModule = {
? namespaced: true, //命名空间
? state: {?
? ? count: 99,?

? },
? getters: {?
? ? doubleCount(state) {
? ? ? return state.count * 2
? ? }
? },
? mutations: {?
? ? add(state, payload = 1) {
? ? ? state.count += payload
? ? },

? ? minus(state) {
? ? ? state.count -= 1
? ? },
? },
? actions: {?
? ? asyncAdd(context, payload) {
? ? ? setTimeout(() => {
? ? ? ? context.commit('add', payload)
? ? ? }, 2000)
? ? },
? },
}

export default counterModule
//当然对应导入vue数据，还有this.$store的方式，和this.$router相似，打印就可以看到里面的详细信息，就是相应的数据和逻辑函数

//通过vuex-persistedstate包的下载，可实现数据的存储