vuex store具体用法

新建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使用

<input
        type="text"
        v-model="$store.state.count"
      />
      <input
        type="text"
        v-model="$store.getters.countplus"
      />
      <input
        type="button"
        value="add"
        @click='$store.dispatch("add")'
      >

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