Vuex的四个辅助函数

予你@。

已于 2022-04-27 17:43:26 修改

阅读量348

点赞数 3

分类专栏： vue 文章标签： vue.js

于 2022-04-27 17:39:52 首次发布

本文链接：https://blog.csdn.net/weixin_44948981/article/details/124456387

版权

vue 专栏收录该内容

64 篇文章 2 订阅

订阅专栏

本文通过一个Vue组件示例，展示了如何使用Vuex的mapState和mapActions辅助函数来简化对state数据的访问和actions的调用。在组件中，我们直接映射了Vuex store中的personList状态，并通过mapActions方法调用updatePerson action进行异步操作。同时，person.js模块使用了命名空间以增强模块间隔离性。

摘要由CSDN通过智能技术生成

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
}

结果：