一个简单计数器——关于vuex的傻瓜式理解

刚学vuex之前预习了一下，参考视频是一个计数器的案例：https://www.bilibili.com/video/BV1h7411N7bg?p=4

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
State

0.使用state中共享数据的第一种方式

0.1.1在store=>index.js=>State:{}

export default new Vuex.Store({
  state: {
    count: 0
  }
})


0.1.2在组件中直接使用使用 src=>components=>myAdd.vue

<template>
    <div><h3>当前最新的count值为：pw_ this.$store.state.count </h3></div>
</template>

0.使用state中共享数据的第二种方式
0.2.1在vue中导入mapState函数 src=>components=>mySub.vue

import {mapState} from 'vuex'

0.2.2通过mapState函数，将当前组件需要的全局数据，映射为当前组件的computed计算属性

<script>
import {mapState} from 'vuex'
export default {
    data (){
        return {
        }
    },
    computed:{
        // ... 展开运算符
        // 把全局里面的数据映射为当前组件的计算属性
        ...mapState(['count'])
    }
}
</script>

0.2.3

<h3>当前最新的count值为：pw_count</h3>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


Mutation

注意:不要在mutations函数中执行异步操作，而且
只有在mutations中定义的函数才有权利去修改State中的数据
记得在小组件的template里给按钮加点击事件
        <button @click="btnHandler1">+1</button> 1.触发mutations的第一种方式
1.1.1在store=>index.js=>mutations:{}中添加commit调用的函数


  mutations: {
    add(state){
      state.count++
    }

1.1.2.触发mutation
    methods:{
        btnHandler1(){
            // 不合理 不利于维护
            // this.$store.state.count++
            this.$store.commit('add')
        }

1.触发mutations的第二种方式
1.2.1从vue中导入mapMutations函数 src=>components=>mySub.vue
import {mapMutations} from 'vuex'

1.2.2通过刚才导入的mapMutations函数，将需要的函数映射为当前组件的methods方法

    methods:{
        // 通过刚才导入的mapMutations函数，将需要的函数映射为当前组件的methods方法
        ...mapMutations(['sub']),
        btnHandler1(){
            this.sub()
        }
    }

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

action

注意：
Action用于处理异步任务，
在Action中，不能直接修改state中的数据，
必须通过context.commit()触发mutations中的某个函数才行

3.1触发Action的第一种方式
3.1.1在store=>index.js中定义Action

actions: {
    addAsync(context){
      setTimeout(()=>{
// 调用mutations里面的add函数
        context.commit('add')
      },2000)
    }
  }

3.1.2在src=>components=>myAdd.vue中触发Action
methods:{
        btnHandler3(){
            this.$store.dispatch('addAsync')
        }
}


3.2触发Action的第二种方式

3.2.1在store=>index.js中定义Action

actions: {
    subAsync(context){
      setTimeout(()=>{
// 调用mutations里面的sub函数
        context.commit('sub')
      },2000)
    }
  }

3.2.2从vuex中导入mapActions函数
import { mapActions } from 'vuex'

3.2.3通过刚刚导入的mapActions函数，将需要的actions函数映射为
当前组件的methods方法
methods:{
 ..mapActions(['subAsync']),
 btnHandler3(){
 this.subAcync()
 }
}
还有种写法
直接把
        <button @click="btnHandler3">-1 Async</button> 改为
        <button @click="subAsync">-1 Async</button> 把btnHandler3删除掉，但是还是得要加...mapActions(['subAsync'])

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Getter
注意：用于对Store中的数据进行加工处理形成新的数据，类似于Vue的计算属性
Store中数据发生变化，Getter的数据也会发生变化
Getter不会修改Store中的数据，只会起一个包装的作用


4.1使用getters的第一种方式
4.1.1先在index.js里面定义getters
  getters:{
    showNum(state) {
      return '当前最新的数量是('+state.count+')'
    }
  }
4.1.2<h3>pw_this.$store.getters.showNum</h3>4.2使用getters的第二种方式
4.2.1先在index.js里面定义getters
  getters:{
    showNum(state) {
      return '当前最新的数量是('+state.count+')'
    }
  }
4.2.2在mySub.vue的vue中导入 import {mapGetters} from 'vuex'
4.2.3添加计算属性
通过刚才导入的mapGetters函数，将需要的函数映射为当前组件的methods的方法
    computed:{
        ...mapGetters(['showNum'])
    }
4.2.4<h3>pw_showNum</h3>