mpvue中使用vuex爬坑过程

怼烎@ 2022-02-09 11:55 305阅读 0赞

# 1、辅助函数不能使用 #

**vuex的辅助函数有mapState、mapGetters、mapMutations、mapActions。**

我们在子组件经常用到很多状态量，为了避免过分的使用t**his.$store.state.xxx、this.$store.dispatch**导致的冗余问题，我们用辅助函数来使代码变得简洁易读，它就相当于语法糖似的，**实际上还会映射为this.$store.xxx**。

在一般的vue-cli + vuex项目中，主函数 main.js 中会将 store 对象提供给 “store” 选项，这样可以把 store 对象的实例注入所有的子组件中，从而在子组件中可以用this.$store.state.xxx、this.$store.dispatch 等来访问或操纵数据仓库中的数据。

但是在mpvue + vuex项目中，不能通过上面那种方式来将store对象实例注入到每个子组件中，也就是说，在子组件中不能使用this.$store.xxx，从而导致辅助函数不能正确使用。

store对象不能注入到子组件中，在子组件中不能使用this.$store，如果使用了vuex辅助函数mapMutations与mapGetters，则在子组件中会报如下的错误：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDRl9KaW5nRmVuZw_size_16_color_FFFFFF_t_70][]

这个时候我们就需要换个思路去实现，要在每个子组件中能够访问this.$store才行。

解决方法：

将store对象通过$store属性添加到vue原型上，即：Vue.prototype.$store = store

在main.js中，需要做一些更改：

import Vue from 'vue'
    import App from './App'
    
    import store from './store/index'
    
    import Fly from 'flyio/dist/npm/wx'
    let fly = new Fly
    Vue.prototype.$fly = fly
    
    Vue.config.productionTip = false
    App.mpType = 'app'
    
    Vue.prototype.$store = store
    
    const app = new Vue(App)
    app.$mount()

使用：

<template>
        <view>
            <button @click="getList">点击</button>
        </view>
    </template>
    
    <script>
      import {mapGetters} from 'vuex'
      import {mapState} from 'vuex'
      import {mapActions} from 'vuex'
    
      export default {
        
        mounted() {
          this.$store.dispatch('insertGoods', "abcd")
          this.insertGoods('vvvvv')// this.$store.dispatch的语法糖
        },
    
        methods: {
          getList() {
            //计算属性，获取state状态
            console.log(this.$store.state.goodsList);
            console.log(this.gettersGooosList);//语法糖
            
            //计算属性，从state派生一些状态，如果getters里面不需要派生，则直接返回和state取值一样
            console.log(this.$store.getters.goodsList);
            console.log(this.stateGoodsList);//语法糖
          },
    
          ...mapActions([
            'insertGoods'
          ])
        },
        
        
        computed: {
          ...mapGetters({
            gettersGooosList:'goodsList'
          }),//计算属性，如果不需要计算，则getters里面直接返回原值，就和State取值一样
    
    
          ...mapState({
            stateGoodsList:'goodsList'
          }),
        },
    
    
      }
    </script>
    
    <style lang="scss">
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDRl9KaW5nRmVuZw_size_16_color_FFFFFF_t_70]: /images/20220206/231d0aae454547ccbc2792ecf0838f58.png