Vuex中的辅助函数

Vuex中的辅助函数

• mapState()
  用来为组件创建计算属性以返回store中的state

mapState(array|object)

示例代码：

<script>
//导入mapState方法
import { mapState } from "vuex";
export default {
  computed:{
    //数组形式，通过这个函数将vuex中的state作为当前组件的计算属性来使用
	...mapState(["username","age","sex","products"]),
	//注意：当该方法以数组的形式使用时，变量的定义不能使用js关键字词
	//可以 以对象的形式使用
	...mapState({extension:extends})
  }
};
</script>

(1)在对应组件中导入mapState()方法
(2)在computed计算属性中使用mapState方法
(3)修改输出的代码
应用举例：基础案例vuex实例(1)

<template>
	<div>
		<h1> 访问vuex数据01 </h1>
		<!--(3)-->
		<p>用户名:{{username}}</p>
		<p>年龄:{{age}}</p>
		<p>性别:{{sex}}</p>
		<p>其他:{{extends}}</p>
		<h2>库存有{{this.$store.getters.getNumber}}件，如下:</h2>
		<p v-for="(item,index) of this.$store.state.products" :key="index">
			{{item.id}} {{item.productName}} {{item.salePrice}}
			//添加查看商品详细信息的链接 to='接口/id' 输出取出商品id -- index
			<router-link :to="`/product?index=${index}`">查看</router-link>
		</p>
	</div>
</template>
<script>
//导入mapState方法
import { mapState } from "vuex";//(1)
export default {
  //(2)
  computed:{
    //...对象展开运算符  打散
	...mapState(["username","age","sex","products"]),
	...mapState({extension:extends})
  },
  mounted() {
    console.log("用户名:" + this.$store.state.username);
  },
};
</script>

• mapGetters()
  用来为组件创建计算属性以返回getters的返回值

mapGetters(array|object)

示例代码：

<script>
//导入mapState方法
import { mapGetters } from "vuex";//(1)
export default {
  //(2)
  computed:{
    //...对象展开运算符  打散
    //将vuex中的getters作为当前组件的计算属性来使用
	...mapGetters(["getNumber"]),
  },
  mounted() {
    console.log("用户名:" + this.$store.state.username);
  },
};
</script>

实例代码：

<template>
	<div>
		<h1> 访问vuex数据01 </h1>
		<!--(3)-->
		<p>用户名:{{username}}</p>
		<p>年龄:{{age}}</p>
		<p>性别:{{sex}}</p>
		<p>其他:{{extends}}</p>
		<h2>库存有{{getNumber}}件，如下:</h2>
		<p v-for="(item,index) of this.$store.state.products" :key="index">
			{{item.id}} {{item.productName}} {{item.salePrice}}
			//添加查看商品详细信息的链接 to='接口/id' 输出取出商品id -- index
			<router-link :to="`/product?index=${index}`">查看</router-link>
		</p>
	</div>
</template>
<script>
//导入mapState方法
import { mapState,mapGetters } from "vuex";//(1)
export default {
  //(2)
  computed:{
    //...对象展开运算符  打散
	...mapState(["username","age","sex","products"]),
	...mapState({extension:extends}),
	...mapGetters(["getNumber"]),
  },
  mounted() {
    console.log("用户名:" + this.$store.state.username);
  },
};
</script>

• mapMutation()
  用于创建组件方法以提交mutation

mapMutation(array|object)

(1)导入mapMutation方法 – ChangeAge.vue
(2)在methods中使用方法
(3)修改调用函数的代码

示例代码：

<script>
import { mapMutation } from "vuex";
export default {
  methods: {
  	//将vuex中的mutation作为当前组件的方法
  	//所以，现在直接调用的是add即可
  	...mapMutation({
		add:"addAgeMutation",
	}),
    handle() {
      this.add();
    },
  },
};
</script>

实例代码：
Changeage.vue

<template>
  <div>
    <h1>修改年龄</h1>
    <h1>当前年龄是:{{ this.$store.state.age }}</h1>
    <button @click="handle">年龄增大</button>
  </div>
</template>
<script>
import { mapMutation } from "vuex";
export default {
  methods: {
  	//将vuex中的mutation作为当前组件的方法
  	//所以，现在直接调用的是add即可
  	...mapMutation({
		add:"addAgeMutation",
	}),
    handle() {
      this.add();
    },
  },
};
</script>

• mapActions()
  用于创建组件方法以分发action

mapActions(array|object)

(1)导入mapActions方法 – Serverdata.vue
(2)在methods中使用函数
(3)修改调用函数的代码
示例：

<script>
import { mapActions } from "vuex";
export default {
  methods: {
    //将vuex中的actions作为当前组件的方法来使用
  	...mapActions(['getProducts'])
    getData() {
      //分发Vuex中的Actions
      this.getProducts();
    },
  },
};
</script>

实例：

<template>
  <div>
    <button @click="getData">获取服务器数据</button>
  </div>
</template>
<script>
import { mapActions } from "vuex";
export default {
  methods: {
    //将vuex中的actions作为当前组件的方法来使用
  	...mapActions(['getProducts'])
    getData() {
      //分发Vuex中的Actions
      this.getProducts();
    },
  },
};
</script>

因为获取数据需要服务器进行交互，启动服务器(打开server运行app.js)

node app.js