以vue3+vuex+typescript为例

我们知道，vue3的新型compositionApi非常方便，可以像react一样自定义hooks，但又比react更容易理解，那么针对setup中如何使用vuex呢？我搜寻久已都没有找到完整的说法，今天在这里小总结，希望看到的小伙伴觉得实用，感谢！！

原来的vuex语法糖用法

直接上代码吧

import { mapState, mapGetters, mapActions, mapMutations} from 'vuex'
export default {
  ...
  computed:{
  	...mapState(['useInfo']),
  	//以下是带命名空间的
  	//...mapState('user',['useInfo']),
  	//...mapState({
	//  userInfo: (sate) => state.user.userInfo
	//}),
  	...mapGetters(['getUserInfo']),
  	//以下是带命名空间的
  	//...mapGetters(['getUserInfo'])
  	//...mapGetters({
	//   userInfo: "user/getUserInfo"
	//})
  },
  methods:{
    ...mapActions(['setUserInfo']),
    //以下是带命名空间的
    //...mapActions({
	//  setUserInfo: 'user/setUserInfo'
    //})
    ...mapActions(['setUserInfo']),
    //以下是带命名空间的
    //...mapMutations({
	//  setUserInfo: 'user/setUserInfo'
    //})
  }
  ...
}

新的vuex语法糖用法

重点看bind方法的作用，就可以把相关的语法糖绑定，最终返回一个动态的Ref或者Reactive，相关资料自行查阅。
还是直接上代码吧

import { computed, defineComponent, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { useStore, mapState, mapGetters, mapActions, mapMutations} from 'vuex'
export default defineComponent({
  ...
  setup() {
    const route = useRoute();
    onMounted(() => {
      console.log(route.fullPath);
    });
    const store = useStore();
    const isLoading = computed(
      mapGetters(['getLoading']).getLoading.bind({ $store: store })
    );
    // const netError = computed(
    //   mapGetters(['getNetError']).getNetError.bind({ $store: store })
    // );
    const netError = computed(
      mapState(['netError']).netError.bind({ $store: store })
    );
    console.log(netError);
    // const setLoading = mapActions(['setLoading']).setLoading.bind({
    //   $store: store
    // });
    const setLoading = mapMutations(['setLoading']).setLoading.bind({
      $store: store
    });
    const freshPage = () => {
      setLoading(true);
      //window.location.reload();
      setTimeout(() => {
        setLoading(false);
      }, 2000);
    };
    return {
      route,
      isLoading,
      netError,
      freshPage
    };
  }
  ...
})

结尾

以上就是一个小小的对比和总结，当然你也可以使用上述setup中定义的store去取到相关的信息和值，那样的话，写法和老的vue2中的写法差不多，还有一种是，直接定义到computed上，举例

import { mapState, mapGetters} from 'vuex'
export default defineComponent({
  ...
  computed: mapGetters(['getUserInfo'])
  //或者也可以使用老的办法
  //computed: {
  // ...mapGetters(['getUserInfo'])
  //带命名空间
  // ...mapGetters({
  //   userInfo: "user/getUserInfo"
  // })
  //}
  ...
})

总之，本文主要讲述针对vue3中setup中如何使用vuex语法糖的问题，小小总结，希望有所帮助。

更多资料请查看

[1] https://v3.cn.vuejs.org/guide/introduction.html
[2] https://vuex.vuejs.org/zh/