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