?mapState，mapGetters，mapActions,mapMutations
映射到state数据的state 我们无需再使用 this.$store....，简化操作
这里我们以mapState和mapActions为例
组件页面
<template>
<div>
<h2>Vuex四个辅助函数的应用</h2>
<div class="formCon">
<el-input v-model="name" placeholder="请输入姓名">></el-input>
<el-button type="primary" size="small" @click="add(name)">添加</el-button>
</div>
<div class="listCon">
<ul>
<li v-for="p in personList" :key="p.ids">{{p.ids}}---{{p.name}}</li>
</ul>
</div>
</div>
</template>
<script>
import {mapState,mapGetters,mapActions,mapMutations} from 'vuex'
export default {
name: 'Vue2TestStatic1',
data() {
return {
name:"",
};
},
computed:{
// 拿到vuex里面的人员列表
...mapState('person',['personList']),
},
mounted() {
},
methods: {
add(name){
this.updatePerson(name)
this.name= '';
},
...mapActions('person',['updatePerson'])
},
};
</script>
<style lang="scss" scoped>
.formCon{
display: flex;
.el-button {
margin-left: 15px;
}
}
.listCon{
width: 400px;
margin-top: 20px;
border: 1px solid skyblue;
}
</style>person.js? ?使用namespaced:true开启命名空间? 可以使我们指定那个模块
这里借助nanoid 随机生成ids
import { nanoid } from 'nanoid'
// 数据
const state = {
personList:[
{
name:'张三',
ids:'SxrDuRF7qQ_5mwmCKf3Oj'
},
{
name:'李四',
ids:'SxrDuRF7qQ_5mwmC443Oj'
}
],
}
// mutations操作数据
const mutations = {
// 添加人员信息
ADD_PERSON(state,personObj){
state.personList.push(personObj);
},
}
// actions进行异步操作 给外界方法 等待触发
const actions = {
updatePerson(contenxt,name){
contenxt.commit('ADD_PERSON',{ids:nanoid(),name:name})
},
}
// 导出
export default {
// 开启命名空间
namespaced:true,
state,
mutations,
actions
}
结果：
