1 # 一、理解vuex

  2     1.概念：专门在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读写），也是一种组件间通信的方式，且适用于任意组件间通信。

  3     2.Github地址：https://github.com/vuejs/vuex

  4 # 二、什么时候使用Vuex

  5     1.多个组件依赖同一状态

  6     2.来自不同组件的行为需要变更同一状态

  7 # 三、安装： npm i vuex@3

  8     vuex@3 对应的  vue2

  9     vuex@4 对应的  vue3

 10 # 四、搭建vuex环境

 11     // 该文件用于创建Vuex中最为核心的store，路劲(一般都放这里)：src/store/index.js

 12     // 引入Vuex

 13     import Vue from 'vue'

 14     import Vuex from 'vuex'

 15

 16     // 引入插件

 17     Vue.use(Vuex);

 18

 19     // 准备actions，用于响应组件中的动作

 20     const actions = {

 21         jia(miniStore, value){

 22         miniStore.commit('JIA', value)

 23         },

 24         jian(miniStore, value){

 25         miniStore.commit('JIAN', value)

 26         },

 27         jiaOdd(miniStore, value){

 28         if (miniStore.state.sum % 2){

 29             miniStore.commit('JIA', value)

 30         }

 31         },

 32         jiaWait(miniStore, value){

 33         setTimeout(()=>{

 34             miniStore.commit('JIA', value)

 35         }, 500);

 36         }

 37     }

 38     // 准备mutation，用于操作数据（state）

 39     const mutations = {

 40         JIA(context, value) {

 41         context.sum += value;

 42         },

 43         JIAN(context, value) {

 44         context.sum -= value;

 45         },

 46     }

 47     // 准备state，用于存储数据

 48     const state = {

 49         sum: 0,

 50     }

 51

 52

 53     // 创建并暴露store

 54     export default new Vuex.Store({

 55         actions,

 56         mutations,

 57         state

 58     });

 59     # 组件部分代码

 60     <template>

 61         <div>

 62         <h1>当前求和为：{{sum}}</h1>

 63         <h1>将当前求和的值放大10倍：{{bigSum}}</h1>

 64         <select v-model.number="n">

 65             <option value="1">1</option>

 66             <option value="2">2</option>

 67             <option value="3">3</option>

 68         </select>

 69         <button @click="invrement">+</button>

 70         <button @click="decrement">-</button>

 71         <button @click="invrementOdd">当前求和为奇数再加</button>

 72         <button @click="invrementWait">等一等再加</button>

 73         </div>

 74     </template>

 75     <script>

 76     import {mapState, mapGetters} from 'vuex'

 77     export default {

 78         name: 'Count',

 79         data(){

 80         return {

 81             n: 1

 82         }

 83         },

 84         computed:{

 85         // sum(){

 86         //     return this.$store.state.sum;

 87         // },

 88         // bigSum(){

 89         //     return this.$store.getters.bigSum;

 90         // },

 91         // 借助mapState生成从state中来的计算数据

 92         // ...mapState({sum: 'sum'}),  // 代替上面的sum()

 93         ...mapState(['sum']),  // 数组写法

 94         // 借助mapState生成从getters中来的计算数据

 95         // ...mapGetters({bigSum: 'bigSum'}), // 代替上面的bigSum()

 96         ...mapGetters(['bigSum']),  // 数组写法

 97         },

 98         methods:{

 99         invrement(){

100             // console.log('@', this);

101             this.$store.commit('JIA', this.n);

102         },

103         decrement(){

104             this.$store.commit('JIAN', this.n);

105         },

106         invrementOdd(){

107             this.$store.dispatch('jiaOdd', this.n);

108         },

109         invrementWait(){

110             this.$store.dispatch('jiaWait', this.n);

111         }

112         },

113         mounted(){

114

115         }

116     }

117     </script>

118     <style scoped>

119         button {

120         margin-left: 5px;

121         }

122     </style>

123

124

125     # 1.组件中渡漆vuex中的数据：$store.state.sum

126     # 2.组件中修改vuex中的数据： $store.dispatch('actions中的方法名', data) 或  $store.commit('mutations中的方法名', data)

127     #     备注：若没有网络请求或其他业务逻辑，组件中也可以越过actions，不写dispatch，直接写commit