VUE案例初识

vuex是渐进式框架，需要什么就添加什么。
弹射装置安装：
1.新建lk-vuex-demo1项目，项目里面open in terminal，终端打开：vue add vuex（可全部配置好）。有可能改变的文件内容包括：src/store.js，package-lock.json，package.json，src/main.js。本人使用的版本最终在src文件夹里面有一个store文件夹，然后里面有一个index.js文件与store.js类似。
实现功能：counter计算器
2.新建Counter.vue组件，并在App.vue里面引入该组件。
3.配置store文件夹下面的index.js文件，内容如下：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {                  //state里面存放数据，相当于data里面的状态管理。
    count:0                 //初始化数据
  },                        //独立于所有组件，是全局的。
  mutations: {
    INCREMENT(state){
      state.count++;
    },
    DECREMENT(state){
      state.count--;
    }
  },                      //操作方法是同步的。mutation是变异、转变的意思。actions是异步的。
  actions: {},
  modules: {}
})

3.Counter.vue中的template和script里面的内容如下：

<template>
     <!--必须得有一个主区域，这些小技巧还是比较重要的！这里的div如果没有的话，或者多个的话，该页面很可能就不显示了！-->
    <div id="counter">
        <p>点击了{{count}}次！</p>
        <button @click="increment">增加+1</button>
        <button @click="decrement">减少-1</button>
    </div>
</template>

<script>
 export default {
        name: "Counter",
        computed:{
            count(){
                return this.$store.state.count;
                //在main.js里面有一句：import store from './store'
            }
        },
        methods:{
            increment(){
                this.$store.commit('INCREMENT');
            },
            decrement(){
                this.$store.commit('DECREMENT');
            }
        }
    }
</script>

store也就是vuex组件里面定义的Vuex.Store，引用的时候state里面的数据使用计算属性（computed），mutations使用方法定义（methods）。
4.补充：还可以使用下面的方式实现同样的功能，把Counter.vue的script改成如下形式：

<script>
    //这个可以在计算属性里面展开，如果拿到的是个方法就可以在方法里面展开。
    import {mapMutations} from "vuex";
    export default {
        name: "Counter",
        computed:{
            count(){
                return this.$store.state.count;
                //在main.js里面有一句：import store from './store'
            }
        },
        methods:{
            //在数组里面拿到方法。
            ...mapMutations(['INCREMENT','DECREMENT']), 
            increment(){
                //下面的使用this才能够正常使用！
                this.INCREMENT();
            },
            decrement(){
                this.DECREMENT();
            }
        }
    }
</script>

5.使用异步的actions实现。

//index.js里面添加如下代码。
actions: {
    increment({commit}){
      commit('INCREMENT');
    },
    decrement({commit}){
      commit('DECREMENT');
    }
  },

//counter.vue里面的代码改成如下形式
methods:{
            // ...mapMutations(['INCREMENT','DECREMENT']),
            increment(){
                this.$store.dispatch('increment');
            },
            decrement(){
                this.$store.dispatch('decrement');
            }

https://img-blog.csdnimg.cn/20210321161005650.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTc5OTAwMw==,size_16,color_FFFFFF,t_70#pic_center
组件和actions之间使用dispatch，actions和mutations之间使用commit，mutations和state之间使用mutate，state和组件之间使用render。
index.js的结构如下（组件需要额外定义）：

export default new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  modules: {}
})

6.实现偶数+1的功能。
1）首先，组件Counter.vue里面添加如下DOM控件：<button @click="decrementIfEven">偶数+1</button>。
2）在index.js里面添加actions的内容：

decrementIfEven({commit,state}){
//这里面从state和mutations里面取出的state是只读形式的，commit从mutations里面取出相应的内容来进行操作。
      if (state.count % 2 === 0){
        commit('INCREMENT');
        //格式：commit('');
      }

3）在组件Counter.vue里面的methods里面添加方法：decrementIfEven(){ this.$store.dispatch('decrementIfEven'); }
7.实现异步+1功能，actions里面的异步操作，通过mutations里面进行同步操作。
1）首先，组件Counter.vue里面添加如下DOM控件：<button @click="incrementAsync">异步+1</button>。
2）在index.js里面添加actions的内容：

incrementAsync({commit}){
      setTimeout(()=>{
        commit('INCREMENT');
      },1000);
      //隔一秒再+1
    }

3）在组件Counter.vue里面的methods里面添加方法：incrementAsync(){ this.$store.dispatch('incrementAsync'); }
8.getter：就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。Getter 会暴露为 store.getters 对象，你可以以属性的形式访问这些值。
1）首先，组件Counter.vue里面添加如下DOM控件：<p>点击了{{count}}次！是{{evenOrOdd}}数！</p>。
2）在index.js里面添加actions的同级别的内容：

getters:{
    evenOrOdd(state){
      return state.count % 2  === 0 ? '偶数' : '奇数';
    }

3）在组件Counter.vue里面的computed里面添加方法：evenOrOdd(){ return this.$store.getters.evenOrOdd; }。
9.有一种特别简单的引用方法：

<script>
import {mapState,mapGetters,mapActions} from 'vuex';
export default {
        name: "Counter",
        computed:{
            ...mapState(['count']),
            ...mapGetters(['evenOrOdd'])
        },
        methods:{
           ...mapActions(['increment','decrement','decrementIfEven','incrementAsync']),
            }
    }
</script>