vuex中如何使用mapState函数(vue2/vue3使用方法)

---

一、mapState的用途

通过…运算符进行结构，将store中的state进行映射。在template中可以直接使用，不需要通过this.$store.state一个个获取store中的state数据。
在vuex中可以导出该函数。

import { mapState} from 'vuex'

二、vue2中使用mapState

1.mapState中传入数组

computed: {
    ...mapState(['name', 'age']),//与state中的名字相同,在template中可以直接使用name,age
  },

2.mapState中传入对象

computed: {
    ...mapState({
      name1: state => state.name+'123',//与state中的名字不相同，可以进行处理
      age: state => state.age
    })
   },
  },

三、vue3的setup中使用mapState

import { useStore, mapState } from 'vuex'

setup(){
    const store = useStore() //获取到store对象
   // {nickname：function；age：function}
    const storeStsteFns = mapState(['name', 'age'])
    const storeState = {}
    Object.keys(storeStsteFns).forEach(item => {
    // 给函数绑定this
    const fn = storeStsteFns[item].bind({ $store: store })
    //用computed包裹，在computed中获取mapstate是通过this.$store.state方式获取
    storeState[item] = computed(fn)
    })
     return{
      ...storeState
  }
}

四、vue3中封装useState的Hook

新建usestate.js文件

import { mapState,useStore } from "vuex"
import { computed } from "vue"
export default function(mapper){
    const store = useStore()
    // {nickname：function；age：function}
    const storeStsteFns = mapState(mapper)
    const storeState = {}
    Object.keys(storeStsteFns).forEach(item => {
      // 给函数绑定this
      const fn = storeStsteFns[item].bind({ $store: store })
      // 在computed中获取mapstate是通过this.$store.state方式获取
      storeState[item] = computed(fn)
    })
    return storeState
}

组件中使用

import useState from "./hook/usestate"//导入改hook

 setup(){
   const storeState = useState(['name', 'age'])//使用useState
    // const storeState = useState({ //传入对象也可以
    //   emotion:state =>state.name+'hhh',
    //   myage:state =>state.age
    // })
     return{
       ...storeState 
      }
    }