Vue 状态管理之vuex && {mapState,mapGetters}

  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