VUE框架CLI组件化VueX使用mapState和mapGetters优化computed计算属性------VUE框架

已于 2023-12-17 17:41:27 修改
阅读量1.3k 收藏 28
点赞数 29
分类专栏： # VUE框架 前端 文章标签： vue.js javascript 前端 ecmascript vue 前端框架 json
于 2023-12-15 11:23:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/2201_75960169/article/details/135013071
版权 
import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const actions = {
    saveUser(context,value){
        context.commit("SAVE_USERS",value);
    },
    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){
        // unshift往第一个位置加东西,push往最后加东西
        state.vips.push(value);
    },
    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){

        context.commit("SAVE_USERS",value);

    },

    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){

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

        state.vips.push(value);

    },

    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>
        <h1>用户列表</h1>
        <input type="text" v-model="username"/>
        <button @click="saveUser()">保存用户</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 } 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(){
                const id = this.users.length + 1;
                const user = {"id" : id,"name" : this.username};
                // 如果action中的逻辑非常简单,可以直接commit
                // this.$store.dispatch("saveUser",user);
                this.$store.commit("SAVE_USERS",user);
                this.username = "";
            }
        }
    }
</script>

<style>

</style>

<template>

    <div>

        <h1>用户列表</h1>

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

        <button @click="saveUser()">保存用户</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 } 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(){

                const id = this.users.length + 1;

                const user = {"id" : id,"name" : this.username};

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

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

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

                this.username = "";

            }

        }

    }

</script>

<style>

</style>

<template>
    <div>
        <h1>会员列表</h1>
        <input type="text" v-model="username"/>
        <button @click="saveVip()">保存用户</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 } 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(){
                const id = this.vips.length + 1;
                const vip = {"id" : id,"name" : this.username};
                // 如果action中的逻辑非常简单,可以直接commit
                // this.$store.dispatch("saveVip",vip);
                this.$store.commit("SAVE_VIP",vip);
                this.username = "";
            }
        }
    }
</script>

<style>

</style>

<template>

    <div>

        <h1>会员列表</h1>

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

        <button @click="saveVip()">保存用户</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 } 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(){

                const id = this.vips.length + 1;

                const vip = {"id" : id,"name" : this.username};

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

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

                this.$store.commit("SAVE_VIP",vip);

                this.username = "";

            }

        }

    }

</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>

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值