VueX里的mapGetters

这些是VueX文件里的

import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex);
const store = new vuex.Store({//store对象
  state:{
    name: '金灿',
    age:19,
    number:17763011975
  },
  mutations: {
    edit(state, data){
      state.name=data.name
      state.age=data.age
      state.number=data.number
      // 对state对象中添加一个age成员15
      // Vue.set(state,"age",19)
      // Vue.set(state,"number",17763011975)
      // 将添加的name成员删除
      // Vue.delete(state,'name')
    }
  },
  getters:{
    nameInfo(state){
        return "姓名:"+state.name+
              "号码:"+state.number
    },
    fullInfo(state,getters){
        return getters.nameInfo+'年龄:'+state.age
    }  
  },
  actions:{
    aEdit(context,payload){
        setTimeout(()=>{
          context.commit('edit',payload)
        },2000)
    }
  },
  models:{
    a:{
        state:{},
        getters:{},
    }
  }
})
export default store

组件里

组件内调用一般都像这样

methods:{
    add(){
      console.log(this.$store.state.name)
    }
},

但其实可以用引用vuex里的方法

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

再：

export default {
  data(){
    return({

    })
  },
  computed: {
    ...mapGetters(['name','age','number'])
  },
  methods: {
    ...mapMutations(['edit']),
    ...mapActions(['aEdit'])
  },
}

然后这样直接引入就好了

  created () {
    // this.edit({name: 'kk',age: 10, number: 1762727126})
    this.aEdit({name: 'kkdf',age: 12, number: 88787})
  }