Vuex学习

Vuex学习（计算器）

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex)
export default new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        add(state){
            state.count++
        },
        subtract(state){
            state.count--
        },
        addN(state,step){
            state.count += step
        },
        subtractN(state,step){
            state.count-=step
        }
    },
    actions: {
        addAsync(context){
            setTimeout(() => {
                context.commit('add')
            }, 1000);
        },
        addAsyncS(context,step){
            setTimeout(() => {
                context.commit('addN',step)
            }, 1000);
        },
        addAsyncJ(context,step){
            setTimeout(() => {
                context.commit('subtractN',step)
            }, 1000);
        },
    },

计算器加号组件

<template>
  <div>
      <h2>当前最新的值为：{{ $store.state.count }}</h2>
      <button @click="btnHandler1">+1</button>
      <button @click="btnHandler3">+3</button>
      <button @click="btnHandler4">延迟一秒+1</button>
      <button @click="btnHandler5">延迟一秒+3</button>
      <h4>{{ $store.getters.showNum  }}</h4>
  </div>
</template>

<script>
export default {
    data(){
        return{};
    },
    methods:{
        btnHandler1(){
            this.$store.commit('add')
            // this.$store.state.count++
        },
        btnHandler3(){
            this.$store.commit('addN',3)
        },
        // 异步让count加3
        btnHandler4(){
            this.$store.dispatch('addAsync')
        },
        btnHandler5(){
            this.$store.dispatch('addAsyncS',3)
        }
    }
}
</script>

<style>

</style>

计算器减法组件

<template>
  <div>
    <h2>当前最新的值为：{{ count }}</h2>
    <button @click="btnHJandler1">-1</button>
    <button @click="btnHJandler2">-3</button>
    <button @click="btnHJandler3">延迟一秒-3</button>
    <h3>当前最新的值为：{{ showNum }}</h3>

  </div>
</template>

<script>
import { mapState, mapMutations,mapActions,mapGetters } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapState(["count"]),
    ...mapGetters(["showNum"]),
  },
  methods: {
      ...mapMutations(["subtract", "subtractN"]),
      ...mapActions(['addAsyncJ']),
    btnHJandler1() {
      this.subtract()
    },
    btnHJandler2() {
      this.subtractN(3)
    },
    btnHJandler3(){
        this.addAsyncJ(3)
    }
  },
};
</script>

<style>
</style>

知识点总结

• state

  • Vuex中代码

  	state: {
   	   count: 0
  	 },
  

  • 此处是Vuex存储的地方
  • 在组件中使用的两种方法
  • 一

    <h2>当前最新的值为：{{ $store.state.count }}</h2>
    

  • 二

     <h2>当前最新的值为：{{ count }}</h2>
    
    import { mapState } from "vuex";
    
    computed: {
    ...mapState(["count"]),
     },
    

• mutations

  • Vuex中代码

  mutations: {
  	addN(state,step){
          	state.count += step
      	},
      }
  

  • 修改数据的地方
  • 在组件中使用的两种方法
    • 一

    	btnHandler3(){
         this.$store.commit('addN',3)
    },
    

    • 二

    import {  mapMutations } from "vuex";
    methods:{
    ...mapMutations(["addN"]),
     btnHJandler2() {
    		 this.addN(3)
    	 },
    }
    

• actions

  • Vuex中代码

   actions: {
   	addAsyncS(context,step){
        	  // 异步行为 
        	  // 这里的context就类似于newVuex的实力对象
        	  setTimeout(() => {
              context.commit('addN',step)
        	  }, 1000);
     	 },
    }
  

  • 这里是进行异步操作的
  • 这里不可以直接操作state中的值
  • 只能通过异步mutation中的方法
  • 在组件中使用的两种方法
    • 一

     btnHandler5(){
        this.$store.dispatch('addAsyncS',3)
    }
    

    • 二

    import { mapActions } from "vuex";
    methods: {
    	  ...mapActions(['addAsyncS']),
    	  btnHJandler3(){
    		this.addAsyncS(3)
    	 }
    }
    

• getters

  • Vuex中代码

  	getters:{
      	showNum:state=>{
    	      return '当前最新的数量是['+ state.count +']'
    	  }
    },
  

  • getters不会去修改原数据他出去完成之后会形成一个新的数据类似于计算属性
  • statez中的数据发生改变getters里面也会改变
  • 在组件中使用的两种方法
    • 一

    <h4>{{ $store.getters.showNum  }}</h4>
    

    • 二

    <h3>当前最新的值为：{{ showNum }}</h3>
    computed: {
    	...mapGetters(["showNum"]),
    },