vuex与map映射实现方法梳理分析

Vuex

vuex执行过程

🎈相当于一个公共的资源库，保存共有的数据

🎈使用场景：点击按钮后，将数据保存到store身上，跳转路由后使用

🎈将actions,mutations(操作数据),state(储存数据),都交给store管理,storez在vc和vm上都有

🎈其中state里面是自定义的一些变量，需要用来保存数据；mutations是用来触发事件，相当于方法，用户需要通过触发这个方法，借此来保存数据；第二个参数为用户传入的值，然后在方法中赋值给state中变量，也可以准备getters对state中的数据进行加工

🎈在组件中通过dispatch将数据传给actions，在actions中的方法中通过commit将数据交给mutations

vuex的使用

📢1. store在vc和vm中均有

📢2. 组件中读取vuex中的数据:$store.state.sum

📢3. 组件中修改vuex中的数据:$store.dispatch(‘action中的方法名’,数据)或 $store.commit(‘mutation中的方法名’,数据)

📢4. 如果组件中没有过多的逻辑业务要求，组件中也可以越过action，即不写dispatch直接编写commit

• 创建store

//创建store文件夹下的index.js，在main.js中引用，并在new Vue({})加入
//index.js文件中
//store下的index.js
//该文件用于创建Vuex中最重要的Store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
-----------------------
Vue.use(Vuex)
   //创建store
   const store = new Vuex.Store({
       actions,
       mutations,
       state,
       getters(放入store中操作的属性)
   })
   //暴露/导出store
 export default store

• 在组件中读取index.js中state中的数据

//组件中
$store.state.sum

• 组件中修改vuex中的数据:$store.dispatch(‘action中的方法名’,数据)或 $store.commit(‘mutations中的方法名’,数据)

methods:{
           increment(){
               //没有任何操作逻辑，可以直接通过commit和mutations对话
               // this.$store.dispatch('jia',this.n)\
               this.$store.commit('JIA',this.n)
           },
            decrement(){
               // this.$store.dispatch('jian',this.n)
                this.$store.commit('JIAN',this.n)
            },
            incrementOdd(){
              this.$store.dispatch('jiaOdd',this.n)
            },
            incrementWait(){
              this.$store.dispatch('jiaWait',this.n)
            }
  }

• index.js中对state中数据的操作(actions,mutations,state,getters)

//准备actions----用于响应组件中的动作
const actions ={
   //context为上下文 里面含有state等很多
   // jia(context,value){
   //     console.log('actions中的jia被调用了',value);
   //     context.commit('JIA',value)
   // },
   // jian(context,value){
   //     context.commit('JIAN',value)
   // },
   jiaOdd(context,value){
       if(context.state.sum ％2){
           context.commit('JIA',value)
       }
   },
   jiaWait(context,value){
       setTimeout(()=>{
           context.commit('JIA',value)
       },500)
   }
}
//准备mutations---用于操作数据(state)
   const mutations = {
       JIA(state,value){
           console.log('mutations被调用了',state,value);
           state.sum += value
       },
       JIAN(state,value){
           state.sum -= value
       }
   }
   //准备state ---- 用于存储数据
   const state ={
       sum:0
   }

getters配置

1.概念:当state中的数据需要通过加工后再使用时，可以使用getters加工

2.再store.js中追加getters配置

---------
//准备getters----用于将state中的数据进行加工
const getters ={
   bigSum(state){
       return state.sum*10
   }
}
//创建store
const store = new Vuex.Store({
   actions,
   mutations,
   state,
   getters
})
//暴露,导出store
export default store

3.在组件中读取数据:$store.getters.bigSum

Map映射

• mapState方法

computed:{
   //借助mapState生成计算属性,sum,school等（对象写法）
   ...mapState({sum:'sum',school:'school'})
   //借助mapState生成计算属性,sum,school等（数组写法）
   ...mapState(['sum','school'])
}

• mapGetters方法:用于帮助我们映射getters中的数据为计算属性

computed:{
   //借助mapGetters生成计算属性,sum,school等（对象写法）
   ...mapGetters({bigSum:'bigSum'})
   //借助mapGetters生成计算属性,sum,school等（数组写法）
   ...mapGetters(['bigSum'])
}

• mapActions方法

methods:{
   //靠mapActions生成 incrementOdd,incrementWait(对象形式)
   ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
    //靠mapActions生成 incrementOdd,incrementWait(数组形式)
   ...mapActions(['jiaOdd','jiaWait'])
}

• mapMutations方法

methods:{
   //靠mapMutations生成 incrementOdd,decrement(对象形式)
   ...mapMutations({increment:'JIA',decrement:'JIAN'})
    //靠mapMutations生成 JIA,JIAN(数组形式)
   ...mapMutations(['JIA','JIAN'])
}

但由于this.n参数是自己写进去的，生成方法时无法写入，会自动生成value传入（默认为event）,所以可以在组件结构中调用方法时直接传入参数

注：mutations和actions的映射需要写在methods中，getters和state的映射需要写在computed中

来源：https://blog.csdn.net/m0_63338686/article/details/126794104