Vue3.0使用Vuex之mapState与mapMutations用法

1.新建useMapState.ts文件

import { computed } from "vue"
import { mapState, useStore } from "vuex"
export default function (state:any) {
    // 1. 获取实例 $store
    const store = useStore()
    // 2. 遍历状态数据
    const storeStateFns = mapState(state)
    // 3. 存放处理好的数据对象
    const storeState = {}
    // 4. 对每个函数进行computed
    Object.keys(storeStateFns).forEach(fnKey => {
        const fn = storeStateFns[fnKey].bind({ $store: store })//同时改变this指向
        // 遍历生成这种数据结构 => {name: ref(), age: ref()}
        storeState[fnKey] = computed(fn)
    })
    return storeState
}

2.新建useMutations.ts文件

import { useStore,mapMutations } from 'vuex';
export default function (Mutations:any){
    const store = useStore()
    const mutations = mapMutations(Mutations)
    const newMutations = {}
    Object.keys(mutations).forEach(key => {
        newMutations[key] = mutations[key].bind({ $store: store })
     })
     return newMutations
}

3.store.ts文件

import { createStore } from 'vuex'
export default createStore({
  state: {
    showPopup: false,
    total:'',
    popupOption: {
      currentCompoent: '',//当前组件名称
      title: '',//弹窗标题
      id:'',   //查询id
      code:'1',  //撒点code
      category:'',//预警类型
      width: '1100px',
      height: '570px'
    }
  },
  getters: {
  },
  mutations: {
    SET_SHOW_POPUP: (state, show) => {
      state.showPopup = show;
    },
    SET_POPUP:(state,option)=>{
       state.popupOption=option
    },
    SET_TOTAL:(state,total)=>{
      state.total=total
    }
  },
  actions: {
  },
  modules: {
  }
})

4.组件内具体使用