this.$store.dispatch() 与 this.$store.commit()方法的区别

一、了解一下vuex存取异步与同步方法

this.$store.dispatch() 与 this.$store.commit()方法的区别

总的来说他们只是存取方式的不同,两个方法都是传值给vuex的mutation改变state

含有异步操作，例如向后台提交数据

this.$store.dispatch() ，写法：this.$store.dispatch(‘action方法名’,值)

同步操作

this.$store.commit()，写法：this.$store.commit(‘mutations方法名’,值)

commit: 同步操作

存储 this.$store.commit('changeValue',name)
取值 this.$store.state.changeValue

dispatch: 异步操作

存储 this.$store.dispatch('getlists',name)
取值 this.$store.getters.getlists

二、了解一下store基本属性，分别有着怎样的作用

const store = new Vuex.Store({

    // 定义的公共变量
    state: {
          count: 1,
          stu: [{id:1,age:18,name:'dx'},{id:2,age:20,name:'yx'},{id:3,age:100,name:'xx'}]
    },

    // state中的变量只能在mutations中通过方法修改
    mutations: {

      //当你需要改变state并且同步的时候在这里
      changeCount: function (state) {
            state.count++
            console.log('改变了count')
      }

    },

    //这里的东西全都是异步的
    actions: {

    },

    getters: {
        //当你需要改变state，并且需要经过比较复杂的计算时
        //里面的东西全都是一些方法
        //如果计算的东西，不需要组件传回参数，就直接返回一个值，
        more20age(state){
            return state.stu.filter(s =>s.age>=20) 
        }

       //如果计算的东西，需要组件传回参数，就返回一个方法
        moreage(state){
            return function(age){
                return state.stu.filter(s =>s.age>=age)
            }
        }
    }
    
    // vuex持久化多模块 需要启用命名空间
    namespaced:true;

})