vue2中，Vuex和Store的基本使用（二）——store中存储数据，dispatch 和 commit的区别

vue2中，Vuex和Store的基本使用（二）——store中存储数据，dispatch 和 commit的区别

• dispatch: 含有异步操作

存储：

this.$store.dispatch('initUserInfo',friend);

取值：

this.$store.getters.userInfo;

• commit:同步操作

存储：

this.$store.commit('initUserInfo',friend);

取值：

this.$store.state.userInfo;

• 实例

新建store.js

import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex);
var state = {
    count: 1
}
var mutations = {
    add(state, arg) {
        state.count++;
    }
}
var actions = {
    add({ commit }) {
        commit("add");
    }
}
var getters = {
    countplus(state) {
        return state.count + "的包装属性";
    }
}

var store = new Vuex.Store({
    state, actions, mutations, getters
})


export default store

app.vue使用

$store.dispatch("add")会调用actions的add方法
commit("add")会调用mutations的add方法
getters是可在不改变state的情况下对其增强，类似代理