vuex基础（vuex基本结构与调用）

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

const modulesA = {
    state:{//状态
        count:100
    },
    getters:{//状态计算
        addStr(state){
            return state.count + '状态计算';
        }
    },
    mutations:{
        addNum(state,payload){//同步增加count数量
            state.count += payload.count;
        },
        deleteNum(state,payload){//同步减少count数量
            state.count -= payload.count;
        }
    },
    actions:{
        asyncAddNum({commit}){//模拟请求之后增加count数量
            setTimeout(() => {
                commit('addNum',{
                    count:1
                })
            },1000);
        },
        asyncDeleteNum({commit}){//模拟请求之后，减少count数量并返回Promise对象进行下一步回调操作
            return new Promise((resolve,reject) => {
                setTimeout(() => {
                    commit('deleteNum',{
                        count:10
                    });
                    resolve();
                },1000);
            });
        },
        async asyncDeleteAdd({commit,dispatch}){//模拟先请求其他actions请求，请求成功之后并在增加count数量
            await dispatch('asyncDeleteNum').then(() => {
                console.log('先异步减去10在回调加300');
            });
            commit('addNum',{
                count:300
            })                
        }
    }    
}

const modulesB = {
    state:{
        count:200
    }    
}

const vuexStore = new Vuex.Store({
    modules:{
        modulesA:modulesA,
        modulesB:modulesB
    }
});

export default vuexStore;

 

<template>
  <div>
    <span>测试</span>
    <div>
        <h3>state:{{getState}}</h3>
        <h3>getters:{{getGetters}}</h3>
    </div>
    <div>
      <button @click="addNum">同步提交mutations</button>
      <!-- <button @click="addNum({count:10})">同步提交mutations</button>用mapMutations引入的mutations在调用这个方法的时候传参 -->
      <button @click="asyncAddNum">异步请求actions</button>
      <button @click="asyncDeleteNum">多个actions异步请求actions</button>
      <button @click="asyncDeleteAdd">先异步在同步</button>
    </div>
  </div>
</template>

<script>

import {mapState,mapGetters,mapMutations,mapActions} from 'vuex';

export default {
  name: 'vuexDemo',
  data(){
      return {

      }
  },
  computed:{
      getState(){//获取状态
          return this.$store.state.modulesA.count;
      },
      getGetters(){//获取状态计算
          return this.$store.getters.addStr;
      },
      ...mapState({
          messageOne: state => state.modulesA.count,                 
      }),
      ...mapGetters([
        'addStr'
      ])      
  },
  methods:{
    addNum(){
      this.$store.commit('addNum',{count:10});
    },
    asyncAddNum(){
      this.$store.dispatch('asyncAddNum');
    },
    asyncDeleteNum(){
      this.$store.dispatch('asyncDeleteNum');
    },
    asyncDeleteAdd(){
      this.$store.dispatch('asyncDeleteAdd');
    },
    // ...mapMutations([//mapMutations参数写在调用方法的地方
    //   'addNum'
    // ])
    // ...mapActions([//mapActions参数也写在调用方法的地方
    //   'asyncDeleteAdd'
    // ])
  },
  created(){
      console.log(this.messageOne);
      console.log(this.addStr);
      // console.log(this.$store.state.modulesA.count);
  }
}
</script>

<style>

</style>

 

转载于:https://www.cnblogs.com/xingxingclassroom/p/10817765.html