在上篇文章的基础上：Vue学习之--------深入理解Vuex之getters、mapState、mapGetters
文章目录
- 1、在state中新增用户数组
- 2、新增Person.vue组件
- 3、在Count组件中使用Person组件操作的数据
- 4、测试效果
1、在state中新增用户数组
2、新增Person.vue组件
提示：这里使用nanoid来生成新用户的id。nanoid的安装：npm i nanoid。
如果提示权限不够，使用管理员命令窗口
只需要引入另外一个组件中操作的state的数据
computed: {
personList() {
return this.$store.state.personList;
},
//另外一个组件操作的数据
Count(){
return this.$store.state.sum
}
},
<template>
<div>
<h1>人员信息展示</h1>
<h3 style="color:pink">Count组件的和为：{
{Count}}</h3>
<input type="text" placeholder="请输入姓名" v-model="name" />
<button @click="add">添加</button>
<ul>
<li v-for = "p in personList" :key = "p.id">{
{p.name}}</li>
</ul>
</div>
</template>
<script>
import {nanoid} from 'nanoid'
import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
export default {
name: "Person",
data() {
return {
name: "",
n: 1,
};
},
methods: {
add(){
const personObj = {id:nanoid(),name:this.name}
this.$store.commit('ADD_PERSON',personObj)
this.name = ''
}
},
computed: {
personList() {
return this.$store.state.personList;
},
Count(){
return this.$store.state.sum
}
},
};
</script>
<style lang="css">
</style>
3、在Count组件中使用Person组件操作的数据
首先引入
然后使用
4、测试效果
