前端vue入门(纯代码)22_四个map-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端vue入门(纯代码)22_四个map。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

女为悦己者容，男为悦己者穷。！！！

【23.Vuex中的四个map方法】

[可以去官网看看Vuex3文档](Vuex 是什么？ | Vuex (vuejs.org))

1.vuex求和案例—getters版

getters概念：当state中的数据需要经过加工后再使用时，可以使用getters加工。【是 store 的计算属性】
【getters理解】：类似是Vuex中的计算属性，也具有缓存功能：如果state中的数据得到了改变，那么getters中的属性的值也会发生改变，如果state的值没有发生任何变化，那么getters中的属性，的值就不会发生改变。

store/index.js

getters中配置的属性bigSum(a,b)，必须传一个参数：state【这样方便我们对vuex中的共享数据进行操作】；第二个参数：getters【可传，可不传】

//准备getters——用于将state中的数据进行加工【配置定义getters】
const getters = {
	bigSum(state) {
    console.log('getters第一个参数：',state);
    return state.sum*10
  },
};
//准备state——用于存储数据
//数据，相当于data
const state = {
	sum: 0, //当前的和
};

//创建并暴露store
export default new Vuex.Store({
	// property 简写 (用在对象某个 property 的 key 和被传入的变量同名时)
	actions,
	mutations,
	state,
  // 在store中声明getters
  getters,
});

效果展示：

前端vue入门(纯代码)22_四个map,Vue前端,前端,vue.js,javascript

2.vuex求和案例—mapState和mapGetters版

1.`mapGetters` 辅助函数

将 store 中的 getters 映射到局部计算属性。

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

导入mapGetters

//帮助我们将store中的getters部分，映射到本组件中使用。
import { mapGetters } from 'vuex';

使用mapGetters的组件中

computed: {
    //借助mapGetters生成计算属性：bigSum（对象写法）
    ...mapGetters({bigSum:'bigSum'}),

    //借助mapGetters生成计算属性：bigSum（数组写法）
    ...mapGetters(['bigSum'])
},

详细解读一下代码：...mapGetters({bigSum:'bigSum'})

【…xxx】:对象运算符

【mapGetters({bigSum:'bigSum'})】:就是下面代码的简写形式
bigSum(){
    return this.$store.getters.bigSum
}, 
【mapGetters({bigSum:'bigSum'})】:不能简写成【mapGetters({bigSum})或mapGetters(){'bigSum'})】

{bigSum:'bigSum'}名字一样的话，可以采用数组的方式简写：...mapGetters(['bigSum'])

2.`mapState` 辅助函数

将 store 中的 state 映射到局部计算属性。

mapState方法：用于帮助我们映射state中的数据为计算属性

导入mapState

//帮助我们将store中的state部分，映射到本组件中使用。
import { mapGetters,mapState } from 'vuex';

使用mapState的组件中

computed: {
    //借助mapState生成计算属性，从state中读取数据。（对象写法）
	...mapState({sum:'sum',Sjob:'Sjob',Sname:'Sname'}),

	//借助mapState生成计算属性，从state中读取数据。（数组写法）
    ...mapState(['sum','Sjob','Sname']),  
},

详细解读一下代码：...mapState({sum:'sum',Sjob:'Sjob',Sname:'Sname'})

【…xxx】:对象运算符

【mapState({sum:'sum',Sjob:'Sjob',Sname:'Sname'})】:就是下面代码的简写形式
sum(){
  return this.$store.state.sum
},
Sjob(){
  return this.$store.state.Sjob
},
Sname(){
  return this.$store.state.Sname
}, 
{sum:'sum',...}名字一样的话，可以采用数组的方式简写：...mapState(['sum','Sjob','Sname'])

vuex求和案例—mapState和mapGetters版完整代码：

Count.vue文章来源地址https://www.toymoban.com/news/detail-527730.html

<template>
	<div>
		<h1>当前求和为：{{ sum }}</h1>
		<h3 style="color: red">当前求和放大10倍为：{{ bigSum }}</h3>
		<h3>我叫{{Sname}},是一名{{ Sjob }}</h3>
		<select v-model.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>
		<button @click="incrementWait">等一等再加</button>
	</div>
</template>

<script>
import { mapGetters,mapState } from 'vuex';
export default {
	name: 'Count',
	data() {
		return {
			n: 1,
		};
	},
	computed: {
		//#region
		// 1.不借助mapGetters
		/* 		bigSum() {
			// console.log(this);
			return this.$store.getters.bigSum;
		}, */

		//借助mapGetters生成计算属性，从getters中读取数据。（对象写法）
		// ...mapGetters({bigSum:'bigSum'})

		//借助mapGetters生成计算属性，从getters中读取数据。（数组写法）
		...mapGetters(['bigSum']),
		//#endregion

		//#region
		// 2.不借助mapState
      /*sum(){
          return this.$store.state.sum
        },
        Sjob(){
          return this.$store.state.Sjob
        },
        Sname(){
          return this.$store.state.Sname
        }, */

        //借助mapState生成计算属性，从state中读取数据。（对象写法）
        // ...mapState({sum:'sum',Sjob:'Sjob',Sname:'Sname'}),

	   //借助mapState生成计算属性，从state中读取数据。（数组写法）
       ...mapState(['sum','Sjob','Sname']),
		//#endregion
	},
	methods: {
		increment() {
		// 组件派发【dispatch】任务到actions,然后在actions中触发mutations中的方法
			this.$store.commit('JIA', this.n);
		},
		decrement() {
			this.$store.commit('JIAN', this.n);
		},
		incrementOdd() {
			this.$store.dispatch('jiaOdd', this.n);
		},
		incrementWait() {
			this.$store.dispatch('jiaWait', this.n);
		},
	},
	mounted() {
		console.log('Count', this.$store);
	},
};
</script>

<style scoped>
button {
	margin-left: 10px;
}
select {
	margin-left: 20px;
}
</style>

store/index.js

//该文件用于创建Vuex中最为核心的store
import Vue from 'vue';
//引入Vuex
import Vuex from 'vuex';
//应用Vuex插件
Vue.use(Vuex);

//准备actions——用于响应组件中的动作【接收组件派发过来的方法】
const actions = {
	jiaOdd(context, value) {
		console.log('actions中的jiaOdd被调用了');
		// 这里可以访问到state里存储的数据 sum
		if (context.state.sum % 2) {
			context.commit('JIA', value);
		}
	},

	jiaWait(context, value) {
		console.log('actions中的jiaWait被调用了');
		setTimeout(() => {
			context.commit('JIA', value);
		}, 500);
	},
};
//准备mutations——用于操作数据（state）
const mutations = {
	JIA(state, value) {
		console.log('mutations中的JIA被调用了');
		state.sum += value;
	},

	JIAN(state, value) {
		console.log('mutations中的JIAN被调用了');
		state.sum -= value;
	},
};
//准备getters——用于将state中的数据进行加工【配置定义getters】
const getters = {
	bigSum(state,getters) {
    // console.log('getters第一个参数：',state);
    // console.log('getters第二个参数：',getters);
    return state.sum*10
  },
};
//准备state——用于存储数据
//数据，相当于data
const state = {
	sum: 0, //当前的和
  Sname:'伍六七',
  Sjob:'理发师',
};

//创建并暴露store
export default new Vuex.Store({
	// property 简写 (用在对象某个 property 的 key 和被传入的变量同名时)
	actions,
	mutations,
	state,
  // 在store中声明getters
  getters,
});

3.vuex求和案例—mapMutations和mapActions版

1.`mapMutations` 辅助函数

将 store 中的 mutations 映射到局部方法。

mapMutations方法：用于帮助我们在组件中生成与mutations对话的方法，即：包含$store.commit(xxx)的函数

导入mapMutations

//帮助我们将store中的mutations部分，映射到本组件中使用。
import { mapMutations } from 'vuex';

使用mapMutations的组件中

methods:{
    //借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)
    ...mapMutations({ increment: 'JIA', decrement: 'JIAN' }),
    //借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(数组写法)
    ...mapMutations([ 'JIA', 'JIAN' ]),
}

详细解读一下代码：...mapMutations({ increment: 'JIA', decrement: 'JIAN' })

【…xxx】:对象运算符

【mapMutations({ increment: 'JIA', decrement: 'JIAN' })】:就是下面代码的简写形式

【再拆解一下】

increment----->increment() {}

‘JIA’----> this.$store.commit(‘JIA’)
increment() {
    // 组件派发【dispatch】任务到actions,然后在actions中触发mutations中的方法
    this.$store.commit('JIA');
},
decrement() {
    this.$store.commit('JIAN');
},
但是，我们发现commit中没有传数据，所以我们看到页面展示如下：

那么，我们如何才能把数据传递过去呢？
我们看一下官网给的例子：
methods: {
    ...mapMutations([
      'increment', 
  // 将 `this.increment()` 映射为 `this.$store.commit('increment')`

      // `mapMutations` 也支持载荷：
      'incrementBy' 
      //  将 `this.incrementBy(amount)` 映射为 
      // `this.$store.commit('incrementBy', amount)`
    ]),
所以，可以这样传递数据：increment()---->increment(n)
<button @click="increment(n)">+</button>
methods:{
    //借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)
    ...mapMutations({ increment: 'JIA'}),
}
所以，映射后：increment(n) + { increment: 'JIA'}---映射成--->下面的代码
increment(n) {
    // 组件派发【dispatch】任务到actions,然后在actions中触发mutations中的方法
    this.$store.commit('JIA',n);
},
最后，去mutations中调用字符串事件JIA。

2.`mapActions` 辅助函数

将 store 中的 actions 映射到局部方法。

mapActions方法：用于帮助我们在组件中生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数

导入mapActions

//帮助我们将store中的actions部分，映射到本组件中使用。
import { mapActions } from 'vuex';

使用mapActions的组件中

methods:{
    //借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)
    ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

    //借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(数组写法)
    // ...mapActions(['jiaOdd','jiaWait'])
}

代码我们就不解读：和mapMutations一样。

备注：mapActions与mapMutations使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象。

vuex求和案例—mapActions和mapMutations版完整代码：

Count.vue

<template>
	<div>
		<h1>当前求和为：{{ sum }}</h1>
		<h3 style="color: red">当前求和放大10倍为：{{ bigSum }}</h3>
		<h3>我叫{{ Sname }},是一名{{ Sjob }}</h3>
		<select v-model.number="n">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
		</select>
		<button @click="increment(n)">+</button>
		<button @click="decrement(n)">-</button>
		<button @click="incrementOdd(n)">当前求和为奇数再加</button>
		<button @click="incrementWait(n)">等一等再加</button>
	</div>
</template>

<script>
import { mapGetters, mapState, mapMutations, mapActions } from 'vuex';
export default {
	name: 'Count',
	data() {
		return {
			n: 1,
		};
	},
	computed: {
		//#region

		//借助mapGetters生成计算属性，从getters中读取数据。（对象写法）
		// ...mapGetters({bigSum:'bigSum'})

		//借助mapGetters生成计算属性，从getters中读取数据。（数组写法）
		...mapGetters(['bigSum']),
		//#endregion

		//#region
		// 2.不借助mapState
		/*     sum(){
      return this.$store.state.sum
    },
    Sjob(){
      return this.$store.state.Sjob
    },
    Sname(){
      return this.$store.state.Sname
    }, */

		//借助mapState生成计算属性，从state中读取数据。（对象写法）
		// ...mapState({sum:'sum',Sjob:'Sjob',Sname:'Sname'}),

		//借助mapState生成计算属性，从state中读取数据。（数组写法）
		...mapState(['sum', 'Sjob', 'Sname']),
		//#endregion
	},
	methods: {
		//*************程序员亲自写方法******************
		/* increment() {
			// 组件派发【dispatch】任务到actions,然后在actions中触发mutations中的方法
			this.$store.commit('JIA', this.n);
		},
		decrement() {
			this.$store.commit('JIAN', this.n);
		},*/

		//**********借助mapMutations方法****************
		//借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)
		...mapMutations({ increment: 'JIA', decrement: 'JIAN' }),
		//借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(数组写法)
		// ...mapMutations([ 'JIA', 'JIAN' ]),

    //*************程序员亲自写方法******************
		/* incrementOdd() {
			this.$store.dispatch('jiaOdd', this.n);
		},
		incrementWait() {
			this.$store.dispatch('jiaWait', this.n);
		}, */

    //**********借助mapMutations方法****************
			//借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)
			...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

			//借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(数组写法)
			// ...mapActions(['jiaOdd','jiaWait'])
	},
	mounted() {
		console.log('Count', this.$store);
	},
};
</script>

<style scoped>
button {
	margin-left: 10px;
}
select {
	margin-left: 20px;
}
</style>