VUE实例课程---41、counter实例_vuex

VUE实例课程---41、counter实例_vuex

一、总结

一句话总结：

将counter实例中的数据放到vuex中管理起来，组件需要数据的时候就直接从vuex中拿，修改数据的话就就通过actions和mutations来修改vuex中的数据

1、vuex中的state、mutations、actions、getters的关系是什么？

vuex中的state帮外部组件管理数据，mutations负责修改state中的数据，actions负责执行外部组件的方法并且操作vuex中的mutations来更新state，getters对state数据进行修饰方便外部组件调用

2、vuex中的actions带参数？

commit的时候把参数传过来，在mutations对应的方法里面接收参数即可

export default new Vuex.Store({
  state: {
    //初始化数据
    count:0
  },
  mutations: {
    INCREMENT (state,number=1) {
      state.count+=number;
    }
  },
  actions: {
    increment3 ({commit}) {
      commit('INCREMENT',3);
    }
  }
})

二、counter实例_vuex

博客对应课程的视频位置：

1、Counter.vue

<template>
    <div>
        <div>click {{this.$store.state.count}} times, count is {{this.$store.getters.evenOrOdd}}</div>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
        <button @click="incrementIfOdd">increment if odd</button>
        <button @click="incrementAsync">increment async</button>
        <button @click="increment3">increment 3</button>
    </div>
</template>

<script>
    export default {
        name: "Counter",
        data:function () {
            return {};
            // return {
            //     count:1
            // };
        },
        computed:{
            // evenOrOdd:function () {
            //     return this.count%2===0?'偶数':'奇数';
            // }
        },
        methods:{
            increment:function () {
                //console.log(this);
                //console.log(this);
                //console.log(this.$store.state.count);
                // this.count++;
                this.$store.dispatch('increment')
            },
            decrement:function () {
                // this.count--;
                this.$store.dispatch('decrement')
            },
            incrementIfOdd:function () {
                // if(this.count%2===1){
                //     this.count++;
                // }
                this.$store.dispatch('incrementIfOdd')
            },
            incrementAsync:function () {
                // setTimeout(()=>{
                //     this.count++;
                // },1000);
                this.$store.dispatch('incrementAsync')
            },
            increment3:function () {
                this.$store.dispatch('increment3')
            }
        }
    }
</script>

<style scoped>
button{
    margin-right: 10px;
}
</style>

2、store/index.js

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    //初始化数据
    count:0
  },
  mutations: {
    INCREMENT (state,number=1) {
      state.count+=number;
    },
    DECREMENT (state) {
      state.count--
    }
  },
  actions: {
    increment ({commit}) {
      // 提交一个mutation请求
      commit('INCREMENT')
    },
    decrement ({commit}) {
      // 提交一个mutation请求
      commit('DECREMENT')
    },
    incrementIfOdd ({commit, state}) {
      if(state.count%2===1) {
        // 提交一个mutation请求
        commit('INCREMENT')
      }
    },
    incrementAsync ({commit}) {
      setTimeout(() => {
        // 提交一个mutation请求
        commit('INCREMENT')
      }, 1000)
    },
    increment3 ({commit}) {
      commit('INCREMENT',3);
    }
  },
  getters:{
    evenOrOdd (state) { // 当读取属性值时自动调用并返回属性值
      return state.count%2===0 ? '偶数' : '奇数'
    }
  },
  modules: {
  }
})