VueX异步请求和getters辅助函数

375 阅读1分钟

组件中修改vuex中的数据:

APP.vue

image.png

store-index.js

image.png

getters

vuex中的 getters类似是Vuex中的计算属性,也具有缓存功能:如果state中的数据得到了改变,那么getters中的属性的值也会发生改变,如果state的值没有发生任何变化,那么getters中的属性的值就不会发生改变。 通过computed计算属性和@change="changefn"两种方法来渲染表格和对表格信息进行筛选。

        getters: {
            getdz(state){
              return    state.str.filter(r=>r.xueli=='大专');
            },
            getbk(state){
              return    state.str.filter(r=>r.xueli=='本科');
            }
        }
        computed:{
            /* list:function(){
              if(this.xueli==0){
                 return this.$store.state.str
              }else if(this.xueli==1){
                return this.$store.getters.getdz   
              }else if(this.xueli==2){
               return this.$store.getters.getbk
              } else{
                return []
              }   
            } */
          },

mapState,mapGetters辅助函数

辅助函数仅仅是将 store 中的 getter 映射到局部计算属性可以直接使用this.list

image.png