vuex 精简demo解析

1.store/index.js 文件

import Vue from 'vue'
import Vuex from 'vuex'

//使用vuex
Vue.use(Vuex);

//一个store  , Vuex.store的 实例
const store = new Vuex.Store({
    state: {
        count : 1
    },
    getters:{            //  Getter相当于vue中的computed计算属性
        getStateCount: function(state) {
            return state.count + 1;
        }
    },
    mutations: {
        addition(state) {
            state.count = state.count + 1;
        },
        reduction(state) {
            state.count = state.count - 1;
        }
    },
    actions: {      //注册actions，类似vue里面的methods
        //通过这个修改state里面的值
        // 可以直接用mutations修改，但是官方建议使用actions去调用mutations去修改
        addition(context) {
            context.commit("addition");
        },
        reduction(context){
            context.commit("reduction");
        }
    }
})

export default store

main.js

import store from './store/index'
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

App.vue

下面是vuex：this.$store.state.count 获得的数据:
    <h2>{{  this.$store.state.count  }}</h2>
    下面是vuex：this.$store.getters.getStateCount获得的数据:   
    <h2>{{ this.$store.getters.getStateCount }}</h2>

    <button @click="addS">+</button>
    <button @click="reduceS">-</button>
export default {
    methods:{
        addS() {
            //this.$store.commit("addition");
            this.$store.dispatch("addition");
        },
        reduceS() {
            //this.$store.commit('reduction');
            this.$store.dispatch("reduction");
        }
    }
  };

总结:

1. vuex 功能和总线bus插件类似.对全局状态（数据）进行管理

2. 使用dispatch调用actions中的方法，actions中的方法使用commit 调用mutations中的方法。
   在mutations中进行实际数据的修改。
3. getters: Getter相当于vue中的computed计算属性 state ： 里面装所有的状态(数据)

转载于:https://www.cnblogs.com/whyaza/p/11557949.html