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包的下载，可实现数据的存储