vuex

1. npm i vuex
2. 在main.js中引用vuex（//import Vuex from 'vuex'）
3. 在main.js使用插件 // Vue.use(Vuex)
4. 引用store，在在main.js中引用store

• import store from './store/index'

  new Vue({
      el: '#app',
      render: h => h(App),
      store: store,
      beforeCreate() {
          Vue.prototype.$bus = this
      }
  })
  

6. vc ==> store

• vue2要安装vuex3版本 npm i vuex@3
• vue3要安装vuex4版本 npm i vuex@4 src -> store -> index.js

//该文件用于创建Vuex中最为核心的store
//引入Vue
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//使用Vuex插件
Vue.use(Vuex)
//准备actions -> 用于相应组件中的动作
const actions = {
    jia(context, value) {
        context.commit('JIA', value)
    },
    jiaOdd(context,value) {
        console.log('处理了一些事情---jiaOdd')
        context.dispatch('demo1', value)
    },
    demo1(context, value) {
        context.dispatch('demo2',value)
    },
    demo2(context, value) {
        context.commit('JIA', value)
    },
}
//准备mutations -> 用于操作数据（state）
const mutations = {
    JIA(state, value) {
        state.sum += value
    },
    JIAN(state, value) {
        state.sum -= value
    }
}
//准备state -> 用于存储数据
const state = {
    sum: 0,
    school: 'XX'
}
//准备getters —— 用于将state中数据进行加工
const getters = {
    bigSum(state) {
        return state.sum * 10
    }
}
// 创建store 
//  const store = new Vuex.Store({
//    actions: actions, //可以简写actions，
//    mutations，
//    state
//  })
//暴露store
//export default store

//创建并暴露store
export default new Vuex.Store({
    actions,
    mutations，
    state，
    getters
})

Count.vue 使用state和getters的用法

<template>
    <div>
        <h2>当前求和为： {{$store.state.sum}}</h2>
        <h2>学校： {{school}</h2>
        <h2>当前求和放大10倍为： {{$store.getters.bigSum}}</h2>
        <select v-mode.number="n">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
        <button @click="incrementOdd">+</button>
    </div>
</template>
<script>
    export default {
        name: 'Count',
        data() {
            return {
                n: 1, //用户选择的数字
            }
        },
        computed: {
            school() {
                return this.$store.state.school
            }
        },
        methods: {
            increment() {
                this.$store.dispatch('jia',this.n)
            },
            decrement() {
                this.$store.commit('JIAN',this.n)
            },
            incrementOdd() {
                this.$store.dispatch('jiaOdd',this.n)
            },
            
        }
    }
</script>

Count.vue 使用mapState,mapGetters，mapMutations的用法

<template>
    <div>
        <h2>当前求和为： {{$store.state.sum}}</h2>
        <h2>学校： {{school}</h2>
        <h2>当前求和放大10倍为： {{bigSum}}</h2>
        <select v-mode.number="n">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="increment">+</button>
        <button @click="decrement(n)">-</button>
        <button @click="incrementOdd(n)">+</button>
    </div>
</template>
<script>
    import {mapState,mapGetters, mapMutations,mapActions} from 'vuex'
    export default {
        name: 'Count',
        data() {
            return {
                n: 1, //用户选择的数字
            }
        },
        computed: {
            ...mapState(['sum']),//借助mapState生成计算属性，从state中读取数据
            // bigSum() {
            //    return this.$store.getters.bigSum
            //}
            //借助mapGetters生成计算属性，从getters中读取数据(对象写法)
            //...mapGetters({bigSum: 'bigSum'})
            //借助mapGetters生成计算属性，从getters中读取数据(数组写法)
            ...mapGetters(['bigSum'])
        },
        methods: {
            increment() {
                this.$store.dispatch('jia',this.n)
            },
            // decrement() {
            //   this.$store.commit('JIAN',this.n)
            // },
            //借助mapMutations生成对应的方法，方法中会调用commit去联系mutations（对象写法）
            //...mapMutations({increment: 'JIAN'})
                //借助mapMutations生成对应的方法，方法中会调用commit去联系mutations（对象写法）
            ...mapMutations(['JIAN'])
            incrementOdd() {
                this.$store.dispatch('jiaOdd',this.n)
            },
            ...mapActions({incrementOdd: 'jiaOdd'})
            // ...mapActions({['jiaOdd'])
        }
    }
</script>