vuex 精简demo解析

Posted 2022-11-14 whyaza

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 ： 里面装所有的状态(数据)