美文网首页
vuex store具体用法

vuex store具体用法

作者: simplerandom | 来源:发表于2020-06-01 16:38 被阅读0次

    新建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的情况下对其增强,类似代理

    相关文章

      网友评论

          本文标题:vuex store具体用法

          本文链接:https://www.haomeiwen.com/subject/bysszhtx.html