vue3-vueX辅助函数

注意事项：只能在vue2版本中使用（选项式API)

<script>
// mapState 辅助函数
import { mapState,mapGetters,mapMutations,mapActions} from 'vuex'
export default {
   // 方法1:
   // computed:mapState(['user','count','city'])
   computed:{
      // ...mapState(['user']),
      // ...mapState(['count']),
      // ...mapState(['city']),
      ...mapState(['user','count','city']),
      // getters的辅助函数
      ...mapGetters(['getStu'])
   },
   methods:{
      ...mapMutations(['CHANGE_CITY']),
      ...mapActions(['changeCity']),
      chang(){
         // 原来的调用方式
         // this.$store.commit('CHANGE_CITY','上海')
         // 使用辅助函数的调用方式
         // this.CHANGE_CITY('上海');

         let city = '上海';
         // this.$store.dispatch('changeCity',{
         //    city
         // })
         this.changeCity({city});
      }
   }
   /*
   总结:
      mapState,mapGetters:必须放在计算属性中
      mapMutations,mapActions:必须放在methods中
   */ 
}
</script>

1.引入方式

import { mapState,mapGetters,mapMutations,mapActions} from 'vuex'

2.使用方式

mapState,mapGetters:必须放在计算属性中

 mapMutations,mapActions:必须放在methods中

computed:{
      // ...mapState(['user']),
      // ...mapState(['count']),
      // ...mapState(['city']),
      ...mapState(['user','count','city']),
      // getters的辅助函数
      ...mapGetters(['getStu'])
   },
   methods:{
      ...mapMutations(['CHANGE_CITY']),
      ...mapActions(['changeCity']),
      chang(){
         // 原来的调用方式
         // this.$store.commit('CHANGE_CITY','上海')
         // 使用辅助函数的调用方式
         // this.CHANGE_CITY('上海');

         let city = '上海';
         // this.$store.dispatch('changeCity',{
         //    city
         // })
         this.changeCity({city});
      }
   }

3.调用方式

mapState,mapGetters：直接使用

mapMutations,mapActions：调用前加this

 ...mapMutations(['CHANGE_CITY']),
      ...mapActions(['changeCity']),
      chang(){
         // 原来的调用方式
         // this.$store.commit('CHANGE_CITY','上海')
         // 使用辅助函数的调用方式
         // this.CHANGE_CITY('上海');

         let city = '上海';
         // this.$store.dispatch('changeCity',{
         //    city
         // })
         this.changeCity({city});
      }