VUE框架CLI组件化VueX使用mapActions和mapMutations优化方法------VUE框架

已于 2023-12-17 17:42:46 修改
阅读量833 收藏 18
点赞数 23
分类专栏： # VUE框架 前端 文章标签： vue.js javascript 前端 前端框架 vue json ecmascript
于 2023-12-15 15:08:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_75960169/article/details/135017707
版权 

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const actions = {
    saveUser(context,value){
        const id = this.state.users.length + 1;
        const user = {"id" : id,"name" : value};
        context.commit("SAVE_USERS",user);
    },
    saveVip(context,value){
        context.commit("SAVE_VIP",value);
    },
    reverseName(context,value){
        value = value.split('').reverse().join('');
        context.commit("REVERSE_NAME",value)
    }
};
const mutations = {
    SAVE_USERS(state,value){
        // unshift往第一个位置加东西,push往最后加东西
        state.users.push(value);
        
    },
    SAVE_VIP(state,value){
        const id = state.vips.length + 1;
        const vip = {"id" : id,"name" : value};
        // unshift往第一个位置加东西,push往最后加东西
        state.vips.push(vip);
    },
    REVERSE_NAME(state,value){
        state.Name = value;
    }
};
const state = {
    users : [
        {id : "001",name : "Jack"},
        {id : "002",name : "Rose"},
        {id : "003",name : "Tom"},
        {id : "004",name : "Jerry"}
    ],
    vips : [
        {id : "001",name : "Jack"},
        {id : "002",name : "Rose"},
        {id : "003",name : "Tom"},
        {id : "004",name : "Jerry"}
    ],
    Name : ""
};

// 全新的配置项getters
const getters = {
    // 每一个getter就是一个计算属性
    // 每一个getter都会接收一个state对象
    reversedName(state){
        // 可以视为VUE中的计算属性computed
        return state.Name.split('').reverse().join('');
    }
};

export default new Vuex.Store({actions,mutations,state,getters});

import Vue from "vue";

import Vuex from "vuex";

Vue.use(Vuex);

const actions = {

    saveUser(context,value){

        const id = this.state.users.length + 1;

        const user = {"id" : id,"name" : value};

        context.commit("SAVE_USERS",user);

    },

    saveVip(context,value){

        context.commit("SAVE_VIP",value);

    },

    reverseName(context,value){

        value = value.split('').reverse().join('');

        context.commit("REVERSE_NAME",value)

    }

};

const mutations = {

    SAVE_USERS(state,value){

        // unshift往第一个位置加东西,push往最后加东西

        state.users.push(value);

       

    },

    SAVE_VIP(state,value){

        const id = state.vips.length + 1;

        const vip = {"id" : id,"name" : value};

        // unshift往第一个位置加东西,push往最后加东西

        state.vips.push(vip);

    },

    REVERSE_NAME(state,value){

        state.Name = value;

    }

};

const state = {

    users : [

        {id : "001",name : "Jack"},

        {id : "002",name : "Rose"},

        {id : "003",name : "Tom"},

        {id : "004",name : "Jerry"}

    ],

    vips : [

        {id : "001",name : "Jack"},

        {id : "002",name : "Rose"},

        {id : "003",name : "Tom"},

        {id : "004",name : "Jerry"}

    ],

    Name : ""

};

// 全新的配置项getters

const getters = {

    // 每一个getter就是一个计算属性

    // 每一个getter都会接收一个state对象

    reversedName(state){

        // 可以视为VUE中的计算属性computed

        return state.Name.split('').reverse().join('');

    }

};

export default new Vuex.Store({actions,mutations,state,getters});

<template>
    <div>
        <User></User>
        <hr>
        <Vip></Vip>
        <hr>
        <Name></Name>
    </div>
</template>

<script>
    import Vip from "./components/Vip.vue"
    import User from "./components/User.vue"
    import Name from "./components/Name.vue"
    export default {
        name : "App",
        components : {Vip,User,Name}
    }
</script>

<style>

</style>

<template>

    <div>

        <User></User>

        <hr>

        <Vip></Vip>

        <hr>

        <Name></Name>

    </div>

</template>

<script>

    import Vip from "./components/Vip.vue"

    import User from "./components/User.vue"

    import Name from "./components/Name.vue"

    export default {

        name : "App",

        components : {Vip,User,Name}

    }

</script>

<style>

</style>

<template>
    <div>
        <h1>用户列表</h1>
        <input type="text" v-model="username"/>
        <button @click="saveUser(username)">保存用户</button>
        <ul>
            <li v-for="user in users" :key="user.id">
                用户名:{{ user.name }}
            </li>
        </ul>
        <h3>当前用户数量{{ users.length }}</h3>
        <h3>当前会员数量{{ vips.length }}</h3>
        <h3>{{ reversedName }}</h3>
    </div>
</template>

<script>
// vuex自带的mapStated对象,是一个专门用于state对象映射的一个对象
    import { mapState,mapGetters,mapActions } from 'vuex';
    export default {
        name : "User",
        data(){
            return {
                username : ""
            }
        },
        // mounted(){
             // 这个配置项,前面是名字,后面是去store.js下找的属性的名字,必须双引号括起来.不然会在当前vc中找了
        //     const x = mapState({users : "users",vips : "vips"});
        // },
        computed : {
            // users(){
            //     return this.$store.state.users;
            // },
            // vips(){
            //     return this.$store.state.vips;
            // },
            // 对象形式写法
            // ...mapState({users : "users",vips : "vips"}),
            // 数组形式写法,要求计算属性名字和state中的属性名字一致
            ...mapState(["users","vips"]),
            // reversedName(){
            //     return this.$store.getters.reversedName;
            // }
            ...mapGetters(["reversedName"])
        },
        methods : {
            // saveUser(){
            //     // 如果action中的逻辑非常简单,可以直接commit
            //     this.$store.dispatch("saveUser",this.username);
            //     // this.$store.commit("SAVE_USERS",user);
            //     this.username = "";
            // },
            // 对象形式
            ...mapActions({saveUser : "saveUser"}),
            // 数组形式
            // ...mapActions(["saveUser"])
        }
    }
</script>

<style>

</style>

<template>

    <div>

        <h1>用户列表</h1>

        <input type="text" v-model="username"/>

        <button @click="saveUser(username)">保存用户</button>

        <ul>

            <li v-for="user in users" :key="user.id">

                用户名:{{ user.name }}

            </li>

        </ul>

        <h3>当前用户数量{{ users.length }}</h3>

        <h3>当前会员数量{{ vips.length }}</h3>

        <h3>{{ reversedName }}</h3>

    </div>

</template>

<script>

// vuex自带的mapStated对象,是一个专门用于state对象映射的一个对象

    import { mapState,mapGetters,mapActions } from 'vuex';

    export default {

        name : "User",

        data(){

            return {

                username : ""

            }

        },

        // mounted(){

             // 这个配置项,前面是名字,后面是去store.js下找的属性的名字,必须双引号括起来.不然会在当前vc中找了

        //     const x = mapState({users : "users",vips : "vips"});

        // },

        computed : {

            // users(){

            //     return this.$store.state.users;

            // },

            // vips(){

            //     return this.$store.state.vips;

            // },

            // 对象形式写法

            // ...mapState({users : "users",vips : "vips"}),

            // 数组形式写法,要求计算属性名字和state中的属性名字一致

            ...mapState(["users","vips"]),

            // reversedName(){

            //     return this.$store.getters.reversedName;

            // }

            ...mapGetters(["reversedName"])

        },

        methods : {

            // saveUser(){

            //     // 如果action中的逻辑非常简单,可以直接commit

            //     this.$store.dispatch("saveUser",this.username);

            //     // this.$store.commit("SAVE_USERS",user);

            //     this.username = "";

            // },

            // 对象形式

            ...mapActions({saveUser : "saveUser"}),

            // 数组形式

            // ...mapActions(["saveUser"])

        }

    }

</script>

<style>

</style>

<template>
    <div>
        <h1>会员列表</h1>
        <input type="text" v-model="username"/>
        <button @click="SAVE_VIP(username)">保存用户</button>
        <ul>
            <li v-for="vip in vips" :key="vip.id">
                用户名:{{ vip.name }}
            </li>
        </ul>
        <h3>当前用户数量{{ users.length }}</h3>
        <h3>当前会员数量{{ vips.length }}</h3>
        <h3>{{ reversedName }}</h3>
    </div>
</template>

<script>
    import { mapState,mapGetters,mapMutations } from 'vuex';
    export default {
        name : "Vip",
        data(){
            return {
                username : ""
            }
        },
        computed : {
            // users(){
            //     return this.$store.state.users;
            // },
            // vips(){
            //     return this.$store.state.vips;
            // }, 
            ...mapState(["users","vips"]),
            ...mapGetters(["reversedName"])
            // reversedName(){
            //     return this.$store.getters.reversedName;
            // }
        },
        methods : {
            // saveVip(){
            //     // 如果action中的逻辑非常简单,可以直接commit
            //     // this.$store.dispatch("saveVip",vip);
            //     this.$store.commit("SAVE_VIP",this.username);
            //     this.username = "";
            // },
            // 对象形式
            // ...mapMutations({SAVE_VIP : "SAVE_VIP"})
            // 数组形式
            ...mapMutations(["SAVE_VIP"])
        }
    }
</script>

<style>

</style>

<template>

    <div>

        <h1>会员列表</h1>

        <input type="text" v-model="username"/>

        <button @click="SAVE_VIP(username)">保存用户</button>

        <ul>

            <li v-for="vip in vips" :key="vip.id">

                用户名:{{ vip.name }}

            </li>

        </ul>

        <h3>当前用户数量{{ users.length }}</h3>

        <h3>当前会员数量{{ vips.length }}</h3>

        <h3>{{ reversedName }}</h3>

    </div>

</template>

<script>

    import { mapState,mapGetters,mapMutations } from 'vuex';

    export default {

        name : "Vip",

        data(){

            return {

                username : ""

            }

        },

        computed : {

            // users(){

            //     return this.$store.state.users;

            // },

            // vips(){

            //     return this.$store.state.vips;

            // },

            ...mapState(["users","vips"]),

            ...mapGetters(["reversedName"])

            // reversedName(){

            //     return this.$store.getters.reversedName;

            // }

        },

        methods : {

            // saveVip(){

            //     // 如果action中的逻辑非常简单,可以直接commit

            //     // this.$store.dispatch("saveVip",vip);

            //     this.$store.commit("SAVE_VIP",this.username);

            //     this.username = "";

            // },

            // 对象形式

            // ...mapMutations({SAVE_VIP : "SAVE_VIP"})

            // 数组形式

            ...mapMutations(["SAVE_VIP"])

        }

    }

</script>

<style>

</style>

<template>
    <div>
        <input type="text" v-model="$store.state.Name" @keydown.13="submit()"/>
        <button @click="submit">按一下</button>
        <h3>{{ reversedName }}</h3>
    </div>
</template>

<script>
import { mapState,mapGetters } from 'vuex';
export default {
    name : "Name",
    methods : {
        submit(){
            this.$store.dispatch("reverseName",Name);
        }
    },
    computed : {
        // reverseName(){
        //     return this.$store.getters.reversedName;
        // }
        ...mapGetters(["reversedName"]),
        ...mapState(["Name"])
        // 双向数据绑定不能用这种方法,会导致报错
        // Name : {
        //     get(){
        //         return this.$store.state.Name;
        //     },
        //     set(value){
        //         this.$store.state.Name = value;
        //     }
        // }
    }
}
</script>

<style>

</style>

<template>

    <div>

        <input type="text" v-model="$store.state.Name" @keydown.13="submit()"/>

        <button @click="submit">按一下</button>

        <h3>{{ reversedName }}</h3>

    </div>

</template>

<script>

import { mapState,mapGetters } from 'vuex';

export default {

    name : "Name",

    methods : {

        submit(){

            this.$store.dispatch("reverseName",Name);

        }

    },

    computed : {

        // reverseName(){

        //     return this.$store.getters.reversedName;

        // }

        ...mapGetters(["reversedName"]),

        ...mapState(["Name"])

        // 双向数据绑定不能用这种方法,会导致报错

        // Name : {

        //     get(){

        //         return this.$store.state.Name;

        //     },

        //     set(value){

        //         this.$store.state.Name = value;

        //     }

        // }

    }

}

</script>

<style>

</style>

旧约Alatus
关注
  • 23
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vuex modules模式下mapState/mapMutations的操作实例
10-16
主要介绍了Vuex modules 模式下 mapState/mapMutations 的操作实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vuex的使用之mapMutations
weixin_44794123的博客
07-05 9308
vuex中mapMutations的使用。
Vue进阶（四十三）：Vuex之Mutations详解_vuex mutations(1)
最新发布
2301_82243603的博客
04-29 664
通俗理解mutations，里面装着一些改变数据方法的集合，这是Vuex设计很重要的一点，就是把处理数据逻辑方法全部放在mutations里面，使得数据和视图分离。
Vuex的使用（七）——mapMutations的用法
讨厌走开啦
09-08 7710
参考文档：https://vuex.vuejs.org/zh/guide/ mapMutations的定义可以对标mapState和mapGetters，就不赘述了，下面直接上示例代码。首先在Vuex中补充mutations的其他几种用法（修改文件路径为src\store\index.js），代码如下： import Vue from “vue”; import Vuex from “vuex”; Vue.use(Vuex); const store = new Vuex.Store({ state: {
vuex：弄懂mapState、mapGetters、mapMutations、mapActions
u010227042的博客
06-17 1719
vuex进阶 一、state 1.1 引入vuex 以后，我们需要在state中定义变量，类似于vue中的data，通过state来存放状态 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { //存放状态 nickname:'Simba', age:20, gender:'男' }, mutations: {},
Vue2：Vuex中使用mapMutations和mapActions
Brave_heart4pzj的博客
02-18 595
Vue
详解如何在vue-cli中使用vuex
12-09
Vue CLI则是Vue.js的官方脚手架工具，它简化了项目的初始化和配置过程，包括Webpack的配置。在使用Vue CLI创建项目时，结合Vuex可以让我们的开发工作更加高效。 首先，创建一个基于Vue CLI的新项目，例如命名为...
Vue-CLI与Vuex使用方法实例分析
10-15
总之，Vue-CLI简化了Vue项目的初始化和构建过程，而Vuex则为大型Vue应用提供了高效的状态管理方案，两者结合使用能大幅提升开发效率和代码质量。在实际开发中，理解并熟练运用这些工具和概念至关重要。
vue-cli监听组件加载完成的方法
10-18
以上就是使用Vue CLI和Vuex监听组件加载完成的方法。这种方法通过Vuex的全局状态管理，使得我们可以方便地追踪组件的加载状态，并在所有组件加载完成后执行特定的逻辑。请注意，这种方法适用于组件之间有依赖关系...
vue-cli项目优化方法- 缩短首屏加载时间
08-27
Vue-cli 项目优化是指通过各种技术手段和优化方法来提高 Vue 项目的性能和加载速度，缩短首屏加载时间是其中一个重要的方面。以下是相关知识点的详细介绍： 一、使用 Webpack Bundle Analyzer 插件分析 JS 文件大小...
vue-cli下的vuex的简单Demo图解(实现加1减1操作)
01-19
1.vue-cli搭建好项目之后，使用npm安装vuex npm install vuex --save 2.在项目目录中构建vuex目录（这里我新建了store的文件夹，里面新建了store.js文件） 3.在vue项目中的入口文件main.js中，为实例化的 Vue...
vuex的使用之mapActions
热门推荐
weixin_44794123的博客
06-09 1万+
vuex中mapActions的使用
Vue/Vuex (mutations) 核心概念 方法说明、辅助函数 mapMutations使用方法
m0_64494670的博客
11-13 1791
Vue/Vuex (mutations) 核心概念 方法说明、辅助函数 mapMutations使用方法
Vue专项
后知后觉的博客
11-18 847
Vue专项
vuex模块整体回顾
weixin_43909743的博客
12-22 373
vuex基础-介绍 为什么会有Vuex ? ​ Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用**集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测**的方式发生变化。 vuex是采用集中式管理组件依赖的共享数据的一个工具，可以解决不同组件数据共享问题。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NXWj1lLi-1605020012440)(assets/image-20200902235150562.png)] 结论
Vuex入门(四)—— action和...mapActions详解
m0_49714202的博客
03-14 7405
目录Vuex总结:Mutation和Action对比总结:页面组件触发action方法:action概念:1.store.js里面action需要的参数2.XX.vue调用action触发方法 语法:this.$store.dispatch("reduce") reduce为action自定义函数名一.store.js二.action.vue 实现异步action点击加法或减法1s后执行效果如下图三.mapActions.vue ...mapActions实现异步action点击加法或减法1s后执
Vue2-Vuex中State、Mutation及mapState辅助函数、mapMutations的基本用法
LxyingINGing的博客
01-15 665
它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。模板中简化写法：count修改为vuex_count。Vuex 是一个专为 Vue.js 应用程序开发的。mutation:声明修改全局响应式数据方法的地方。state：全局共享的响应式数据。
vuex详解一：彻底弄懂state、mapState、mapGetters、mapMutations、mapActions
冰冰酱
03-24 3260
vuex的使用
vuex中mapActions的概念及用法
jiangjunyuan168的博客
09-21 1万+
一般情况下我们会在组件中使用 this.$store.dispatch() 来触发 action ，想要调用多少个 action 就需要调用多少次 dispatch() ，而使用 mapActions 的话只需要将组件中往 mapActions 中传入与 action 同名的函数，然后调用这些函数即可触发对应的action。了解了 mapActions 大概是用来干什么的之后，下面来介绍一下 mapActions 的具体用法。简单来说 mapActions 就是。
vue-cli3项目搭建与优化全攻略
在本文中，我们将深入探讨如何使用vue-cli3从零开始搭建一个Vue.js项目，并逐步对其进行优化。Vue CLI 3 是 Vue.js 官方提供的一个命令行工具，它极大地简化了 Vue 项目的初始化和构建流程。以下是详细的步骤： ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值