VUE学习(二十一)、Vuex（getters、mapState与mapGetters、mapMutations与mapActions、多组件共享数据、模块化编码）

最新推荐文章于 2024-06-27 17:13:14 发布
最新推荐文章于 2024-06-27 17:13:14 发布
阅读量816 收藏 3
点赞数 3
分类专栏： VUE 文章标签： vue.js javascript 前端 Vuex 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46452300/article/details/122860436
版权

VUE学习(二十一)、Vuex（getters、mapState与mapGetters、mapMutations与mapActions、多组件共享数据、模块化编码）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jjv2YBIr-1644474963310)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20220209141221565.png)]

一、Vuex普通实现求和案例

演示

在这里插入图片描述

实现

1、引入Vuex（store文件下index.js）

//该文件用于创建Vuex中最为核心的store
import Vue from "vue";
/* 
	此处不写在App.vue中的原因
	是因为应该先Vue.use(Vuex)再创建store实列对象
	但是es6规定import语句先执行，如果写在App.vue中
	则会出现先创建store实列对象再Vue.use(Vuex)的情况
*/
//引入Vuex
import Vuex from "vuex";
//应用Vuex插件
Vue.use(Vuex);
/*  
    操作数据前需要进行业务逻辑处理则写在actions中，如果仅仅直接修改数据
    就没必要写在actions中，直接调用mutations就行
*/
//准备actions——用于响应组件中的动作
const actions = {
    /* jia(context,value){
		console.log('actions中的jia被调用了')
		context.commit('JIA',value)
	},
	jian(context,value){
		console.log('actions中的jian被调用了')
		context.commit('JIAN',value)
	}, */
    jiaOdd(context, value) {
        console.log("actions中的jiaOdd被调用了");
        if (context.state.sum % 2) {
            context.commit("JIA", value);
        }
    },
    jiaWait(context, value) {
        console.log("actions中的jiaWait被调用了");
        setTimeout(() => {
            context.commit("JIA", value);
        }, 500);
    }
};
/*  
    mutations注重于操作数据，如果操作数据前有一定的业务逻辑则写在actions中
*/
//准备mutations——用于操作数据（state）
const mutations = {
    JIA(state, value) {
        console.log("mutations中的JIA被调用了");
        state.sum += value;
    },
    JIAN(state, value) {
        console.log("mutations中的JIAN被调用了");
        state.sum -= value;
    }
};
//准备state——用于存储数据
const state = {
    sum: 0 //当前的和
};

//创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state
});

2、Count.vue组件

<template>
    <div>
        <h1>当前求和为：{{ $store.state.sum }}</h1>
        <select v-model.number="n">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
        <button @click="incrementOdd">当前求和为奇数再加</button>
        <button @click="incrementWait">等一等再加</button>
    </div>
</template>

<script>
export default {
    name: "Count",
    data() {
        return {
            n: 1 //用户选择的数字
        };
    },
    methods: {
        increment() {
            this.$store.commit("JIA", this.n);
        },
        decrement() {
            this.$store.commit("JIAN", this.n);
        },
        incrementOdd() {
            this.$store.dispatch("jiaOdd", this.n);
        },
        incrementWait() {
            this.$store.dispatch("jiaWait", this.n);
        }
    },
    mounted() {
        console.log("Count", this);
    }
};
</script>

<style lang="css">
button {
    margin-left: 5px;
}
* {
    margin-left: 30px;
}
</style>

3、main.js(下同)

//引入Vue
import Vue from "vue";
//引入App
import App from "./App.vue";

//引入store
import store from "./store";

//关闭Vue的生产提示
Vue.config.productionTip = false;

//创建vm
new Vue({
    el: "#app",
    render: (h) => h(App),
    store, // store配置项
    beforeCreate() {
        Vue.prototype.$bus = this;
    }
});

4、App.vue(下同)

<template>
	<div>
		<Count/>
	</div>
</template>

<script>
	import Count from './components/Count'
	export default {
		name:'App',
		components:{Count},
		mounted() {
			// console.log('App',this)
		},
	}
</script>

二、Vuex中的getters

1、store下的indx.js中加入如下配置

/*  
	适用于想要复用这些逻辑并且只针对state操作
*/
//准备getters——用于将state中的数据进行加工
const getters = {
    bigSum(state) {
        return state.sum * 10;
    }
};

2、使用

<h3>当前求和放大10倍为：{{$store.getters.bigSum}}</h3>

三、mapState和mapGetters

1、store文件夹下的index.js

//该文件用于创建Vuex中最为核心的store
import Vue from "vue";
//引入Vuex
import Vuex from "vuex";
//应用Vuex插件
Vue.use(Vuex);

//准备actions——用于响应组件中的动作
const actions = {
    /* jia(context,value){
		console.log('actions中的jia被调用了')
		context.commit('JIA',value)
	},
	jian(context,value){
		console.log('actions中的jian被调用了')
		context.commit('JIAN',value)
	}, */
    jiaOdd(context, value) {
        console.log("actions中的jiaOdd被调用了");
        if (context.state.sum % 2) {
            context.commit("JIA", value);
        }
    },
    jiaWait(context, value) {
        console.log("actions中的jiaWait被调用了");
        setTimeout(() => {
            context.commit("JIA", value);
        }, 500);
    }
};
//准备mutations——用于操作数据（state）
const mutations = {
    JIA(state, value) {
        console.log("mutations中的JIA被调用了");
        state.sum += value;
    },
    JIAN(state, value) {
        console.log("mutations中的JIAN被调用了");
        state.sum -= value;
    }
};
//准备state——用于存储数据
const state = {
    sum: 0, //当前的和
    school: "xxx大学",
    subject: "前端"
};
//准备getters——用于将state中的数据进行加工
const getters = {
    bigSum(state) {
        return state.sum * 10;
    }
};

//创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters
});

2、Count.vue组件

<template>
    <div>
        <h1>当前求和为：{{ sum }}</h1>
        <h3>当前求和放大10倍为：{{ bigSum }}</h3>
        <h3>我在{{ school }}，学习{{ subject }}</h3>
        <select v-model.number="n">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
        <button @click="incrementOdd">当前求和为奇数再加</button>
        <button @click="incrementWait">等一等再加</button>
    </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
export default {
    name: "Count",
    data() {
        return {
            n: 1 //用户选择的数字
        };
    },
    computed: {
        //靠程序员自己亲自去写计算属性（等同于...mapState(["sum", "school", "subject"])）
        /* 
			sum(){
				return this.$store.state.sum
			},
			school(){
				return this.$store.state.school
			},
			subject(){
				return this.$store.state.subject
			}, 
		*/

        //借助mapState生成计算属性，从state中读取数据。（对象写法）
        // ...mapState({he:'sum',xuexiao:'school',xueke:'subject'}),

        //借助mapState生成计算属性，从state中读取数据。（数组写法）
        /*  
			...的写法是因为mapState是一个对象，计算属性也是一个对象，
		  	不能在一个对象里直接写一个对象，所以用 ... 将对象展开放入计算属性中
		*/
        ...mapState(["sum", "school", "subject"]),

        /* ******************************************************************** */

        /* bigSum(){
				return this.$store.getters.bigSum
			}, */

        // 借助mapGetters生成计算属性，从getters中读取数据。（对象写法）
        // ...mapGetters({bigSum:'bigSum'})

        //借助mapGetters生成计算属性，从getters中读取数据。（数组写法）
        ...mapGetters(["bigSum"])
    },
    methods: {
        increment() {
            this.$store.commit("JIA", this.n);
        },
        decrement() {
            this.$store.commit("JIAN", this.n);
        },
        incrementOdd() {
            this.$store.dispatch("jiaOdd", this.n);
        },
        incrementWait() {
            this.$store.dispatch("jiaWait", this.n);
        }
    },
    mounted() {
        const x = mapState({ he: "sum", xuexiao: "school", xueke: "subject" });
        console.log(x);
    }
};
</script>

<style lang="css">
button {
    margin-left: 5px;
}
</style>

四、mapMutations和mapActions

1、store文件夹下index.js

//该文件用于创建Vuex中最为核心的store
import Vue from "vue";
//引入Vuex
import Vuex from "vuex";
//应用Vuex插件
Vue.use(Vuex);

//准备actions——用于响应组件中的动作
const actions = {
    /* jia(context,value){
		console.log('actions中的jia被调用了')
		context.commit('JIA',value)
	},
	jian(context,value){
		console.log('actions中的jian被调用了')
		context.commit('JIAN',value)
	}, */
    jiaOdd(context, value) {
        console.log("actions中的jiaOdd被调用了");
        if (context.state.sum % 2) {
            context.commit("JIA", value);
        }
    },
    jiaWait(context, value) {
        console.log("actions中的jiaWait被调用了");
        setTimeout(() => {
            context.commit("JIA", value);
        }, 500);
    }
};
//准备mutations——用于操作数据（state）
const mutations = {
    JIA(state, value) {
        console.log("mutations中的JIA被调用了");
        state.sum += value;
    },
    JIAN(state, value) {
        console.log("mutations中的JIAN被调用了");
        state.sum -= value;
    }
};
//准备state——用于存储数据
const state = {
    sum: 0, //当前的和
    school: "xxx大学",
    subject: "前端"
};
//准备getters——用于将state中的数据进行加工
const getters = {
    bigSum(state) {
        return state.sum * 10;
    }
};

//创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters
});

2、Count.vue组件

<template>
    <div>
        <h1>当前求和为：{{ sum }}</h1>
        <h3>当前求和放大10倍为：{{ bigSum }}</h3>
        <h3>我在{{ school }}，学习{{ subject }}</h3>
        <select v-model.number="n">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="increment(n)">+</button>
        <button @click="decrement(n)">-</button>
        <button @click="incrementOdd(n)">当前求和为奇数再加</button>
        <button @click="incrementWait(n)">等一等再加</button>
    </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
    name: "Count",
    data() {
        return {
            n: 1 //用户选择的数字
        };
    },
    computed: {
        //借助mapState生成计算属性，从state中读取数据。（对象写法）
        // ...mapState({he:'sum',xuexiao:'school',xueke:'subject'}),

        //借助mapState生成计算属性，从state中读取数据。（数组写法）
        ...mapState(["sum", "school", "subject"]),

        /* ******************************************************************** */

        //借助mapGetters生成计算属性，从getters中读取数据。（对象写法）
        // ...mapGetters({bigSum:'bigSum'})

        //借助mapGetters生成计算属性，从getters中读取数据。（数组写法）
        ...mapGetters(["bigSum"])
    },
    methods: {
        //程序员亲自写方法
        /* increment(){
				this.$store.commit('JIA',this.n)
			},
			decrement(){
				this.$store.commit('JIAN',this.n)
			}, */

        //借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)
        ...mapMutations({ increment: "JIA", decrement: "JIAN" }),

        //借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(数组写法)
        // ...mapMutations(['JIA','JIAN']),

        /* ************************************************* */

        //程序员亲自写方法
        /* incrementOdd(){
				this.$store.dispatch('jiaOdd',this.n)
			},
			incrementWait(){
				this.$store.dispatch('jiaWait',this.n)
			}, */

        //借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)
        ...mapActions({ incrementOdd: "jiaOdd", incrementWait: "jiaWait" })

        //借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(数组写法)
        // ...mapActions(['jiaOdd','jiaWait'])
    },
    mounted() {
        const x = mapState({ he: "sum", xuexiao: "school", xueke: "subject" });
        console.log(x);
    }
};
</script>

<style lang="css">
button {
    margin-left: 5px;
}
</style>

五、Vuex实现多组件通信

1、store文件夹下的index.js

//该文件用于创建Vuex中最为核心的store
import Vue from "vue";
//引入Vuex
import Vuex from "vuex";
//应用Vuex插件
Vue.use(Vuex);

//准备actions——用于响应组件中的动作
const actions = {
    /* jia(context,value){
		console.log('actions中的jia被调用了')
		context.commit('JIA',value)
	},
	jian(context,value){
		console.log('actions中的jian被调用了')
		context.commit('JIAN',value)
	}, */
    jiaOdd(context, value) {
        console.log("actions中的jiaOdd被调用了");
        if (context.state.sum % 2) {
            context.commit("JIA", value);
        }
    },
    jiaWait(context, value) {
        console.log("actions中的jiaWait被调用了");
        setTimeout(() => {
            context.commit("JIA", value);
        }, 500);
    }
};
//准备mutations——用于操作数据（state）
const mutations = {
    JIA(state, value) {
        console.log("mutations中的JIA被调用了");
        state.sum += value;
    },
    JIAN(state, value) {
        console.log("mutations中的JIAN被调用了");
        state.sum -= value;
    },
    ADD_PERSON(state, value) {
        console.log("mutations中的ADD_PERSON被调用了");
        state.personList.unshift(value);
    }
};
//准备state——用于存储数据
const state = {
    sum: 0, //当前的和
    school: "xxx大学",
    subject: "前端",
    personList: [{ id: "001", name: "张三" }]
};
//准备getters——用于将state中的数据进行加工
const getters = {
    bigSum(state) {
        return state.sum * 10;
    }
};

//创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters
});

2、Count.vue插件

<template>
    <div>
        <h1>当前求和为：{{ sum }}</h1>
        <h3>当前求和放大10倍为：{{ bigSum }}</h3>
        <h3>我在{{ school }}，学习{{ subject }}</h3>
        <h3 style="color:red">Person组件的总人数是：{{ personList.length }}</h3>
        <select v-model.number="n">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="increment(n)">+</button>
        <button @click="decrement(n)">-</button>
        <button @click="incrementOdd(n)">当前求和为奇数再加</button>
        <button @click="incrementWait(n)">等一等再加</button>
    </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
    name: "Count",
    data() {
        return {
            n: 1 //用户选择的数字
        };
    },
    computed: {
        //借助mapState生成计算属性，从state中读取数据。（数组写法）
        ...mapState(["sum", "school", "subject", "personList"]),
        //借助mapGetters生成计算属性，从getters中读取数据。（数组写法）
        ...mapGetters(["bigSum"])
    },
    methods: {
        //借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)
        ...mapMutations({ increment: "JIA", decrement: "JIAN" }),
        //借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)
        ...mapActions({ incrementOdd: "jiaOdd", incrementWait: "jiaWait" })
    },
    mounted() {
        // const x = mapState({he:'sum',xuexiao:'school',xueke:'subject'})
        // console.log(x)
    }
};
</script>

<style lang="css">
button {
    margin-left: 5px;
}
</style>

3、Person.vue插件

<template>
    <div>
        <h1>人员列表</h1>
        <h3 style="color:red">Count组件求和为：{{ sum }}</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";
export default {
    name: "Person",
    data() {
        return {
            name: ""
        };
    },
    computed: {
        personList() {
            return this.$store.state.personList;
        },
        sum() {
            return this.$store.state.sum;
        }
    },
    methods: {
        add() {
            const personObj = { id: nanoid(), name: this.name };
            this.$store.commit("ADD_PERSON", personObj);
            this.name = "";
        }
    }
};
</script>

六、Vuex模块化编码

在这里插入图片描述
在这里插入图片描述

count.js和person.js在数据少，数据简单的时候也可以写在index.js中

1、store文件夹下index.js

//该文件用于创建Vuex中最为核心的store
import Vue from "vue";
//引入Vuex
import Vuex from "vuex";
import countOptions from "./count";
import personOptions from "./person";
//应用Vuex插件
Vue.use(Vuex);

//创建并暴露store
export default new Vuex.Store({
    modules: {
        countAbout: countOptions,
        personAbout: personOptions
    }
});

2、store文件夹下count.js

//求和相关的配置
export default {
    namespaced: true,
    actions: {
        jiaOdd(context, value) {
            console.log("actions中的jiaOdd被调用了");
            if (context.state.sum % 2) {
                context.commit("JIA", value);
            }
        },
        jiaWait(context, value) {
            console.log("actions中的jiaWait被调用了");
            setTimeout(() => {
                context.commit("JIA", value);
            }, 500);
        }
    },
    mutations: {
        JIA(state, value) {
            console.log("mutations中的JIA被调用了");
            state.sum += value;
        },
        JIAN(state, value) {
            console.log("mutations中的JIAN被调用了");
            state.sum -= value;
        }
    },
    state: {
        sum: 0, //当前的和
        school: "xxx大学",
        subject: "前端"
    },
    getters: {
        bigSum(state) {
            return state.sum * 10;
        }
    }
};

3、store文件夹下person.js

//人员管理相关的配置
import axios from "axios";
import { nanoid } from "nanoid";
export default {
    namespaced: true,
    actions: {
        addPersonWang(context, value) {
            if (value.name.indexOf("王") === 0) {
                context.commit("ADD_PERSON", value);
            } else {
                alert("添加的人必须姓王！");
            }
        },
        addPersonServer(context) {
            axios.get("https://api.uixsj.cn/hitokoto/get?type=social").then(
                (response) => {
                    context.commit("ADD_PERSON", { id: nanoid(), name: response.data });
                },
                (error) => {
                    alert(error.message);
                }
            );
        }
    },
    mutations: {
        ADD_PERSON(state, value) {
            console.log("mutations中的ADD_PERSON被调用了");
            state.personList.unshift(value);
        }
    },
    state: {
        personList: [{ id: "001", name: "张三" }]
    },
    getters: {
        firstPersonName(state) {
            return state.personList[0].name;
        }
    }
};

4、Count.vue组件

<template>
    <div>
        <h1>当前求和为：{{ sum }}</h1>
        <h3>当前求和放大10倍为：{{ bigSum }}</h3>
        <h3>我在{{ school }}，学习{{ subject }}</h3>
        <h3 style="color:red">Person组件的总人数是：{{ personList.length }}</h3>
        <select v-model.number="n">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="increment(n)">+</button>
        <button @click="decrement(n)">-</button>
        <button @click="incrementOdd(n)">当前求和为奇数再加</button>
        <button @click="incrementWait(n)">等一等再加</button>
    </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
    name: "Count",
    data() {
        return {
            n: 1 //用户选择的数字
        };
    },
    computed: {
        //借助mapState生成计算属性，从state中读取数据。（数组写法）
        // ...mapState(["countAbout","personAbout"]) //(使用：countAbout.sum,countAbout.school······)
        ...mapState("countAbout", ["sum", "school", "subject"]), //这种写法的前提是开启命名空间namespaced:true,（直接使用：sum，school·····）
        ...mapState("personAbout", ["personList"]),
        //借助mapGetters生成计算属性，从getters中读取数据。（数组写法）
        ...mapGetters("countAbout", ["bigSum"])
    },
    methods: {
        //借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)
        ...mapMutations("countAbout", { increment: "JIA", decrement: "JIAN" }),
        //借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)
        ...mapActions("countAbout", { incrementOdd: "jiaOdd", incrementWait: "jiaWait" })
    },
    mounted() {
        console.log(this.$store);
    }
};
</script>

<style lang="css">
button {
    margin-left: 5px;
}
</style>

5、Person.vue组件

<template>
    <div>
        <h1>人员列表</h1>
        <h3 style="color:red">Count组件求和为：{{ sum }}</h3>
        <h3>列表中第一个人的名字是：{{ firstPersonName }}</h3>
        <input type="text" placeholder="请输入名字" v-model="name" />
        <button @click="add">添加</button>
        <button @click="addWang">添加一个姓王的人</button>
        <button @click="addPersonServer">添加一个人，名字随机</button>
        <ul>
            <li v-for="p in personList" :key="p.id">{{ p.name }}</li>
        </ul>
    </div>
</template>

<script>
import { nanoid } from "nanoid";
export default {
    name: "Person",
    data() {
        return {
            name: ""
        };
    },
    computed: {
        personList() {
            return this.$store.state.personAbout.personList;
        },
        sum() {
            return this.$store.state.countAbout.sum;
        },
        firstPersonName() {
            return this.$store.getters["personAbout/firstPersonName"];
        }
    },
    methods: {
        add() {
            const personObj = { id: nanoid(), name: this.name };
            this.$store.commit("personAbout/ADD_PERSON", personObj);
            this.name = "";
        },
        addWang() {
            const personObj = { id: nanoid(), name: this.name };
            this.$store.dispatch("personAbout/addPersonWang", personObj);
            this.name = "";
        },
        addPersonServer() {
            this.$store.dispatch("personAbout/addPersonServer");
        }
    }
};
</script>
心醉瑶瑾前
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vuex的mapState，mapGetters，mapActions，mapMutations与模块化
m0_58656423的博客
05-19 2377
vuex的mapState，mapGetters，mapActions，mapMutations与模块化
11.10 Vue day10 Vuex四个map方法 mapMutations Vuex模块化 路由的query参数 多级路由
m0_56356342的博客
11-11 275
path:'message',//此处一定不要写：/message。//借助mapState生成计算属性：sum、school、subject（对象写法）//借助mapState生成计算属性：sum、school、subject（数组写法）path:'news', //此处一定不要写：/news。//借助mapGetters生成计算属性：bigSum（对象写法）//借助mapGetters生成计算属性：bigSum（数组写法）
vue3中的vuex里面map辅助函数
最新发布
lh20_02的博客
06-27 431
在 Vue 3 中，Vuex 通过函数来创建一个 store 实例。但是在使用 Vuex 进行状态管理时，我们可能需要一些辅助函数来简化代码。在 Vue 3 中，我们可以使用mapStatemapGetters和mapActions这些辅助函数。mapState。
vuex模块化，以及如何借助mapActions,mapMutations生成对应的方法
ONLYSRY的博客
07-05 1105
vuex的index.js【模块化写法】 把该放的东西放到固定位置：并加上命名空间：【namespaced: true】其次我们引入了 两个管理配置名：countAbout与personAbout就意味着不能再直接找store下的三个核心配置项 Actions，Mutations，State。必须加入一层关系，vue执行时就会疑惑，你到底要找countAbout下的配置项还是personAbout下的，所以前边的写法也得改。 Count.vue组件： 这里需要关注的重点为： 1.前边
vuex store使用总结 4 (mapState ;mapGetters; mapActions; mapMutations 的 模块化 使用)
唐僧的专栏
07-25 3541
vuex store使用总结 4 (mapState ;mapGetters; mapActions; mapMutations 的 模块化 使用) vuex store使用总结 1 ( 简单使用 ) vuex store使用总结 2 ( 功能化的使用 ) vuex store使用总结 3 (模块化的使用 ) 请先翻看前 两节 再看这里的内容： 这个是我 store 文件夹的结构 分...
vuex mapState mapGetters用法以及多个module模块下用法详解
weixin_46180366的博客
06-02 7486
在vuex，当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余，例如 为了解决这个问题，我们可以使用 mapState和mapGetters 辅助函数帮助我们生成计算属性，让你少按几次键 2、字符串数组写法 除此之外，还有更简洁的写法 当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组，类似于对象的key和value键名相同时{ name: name } =》{ name } 此外如果是用到了module模块化，除了将对象作为
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
08-27
使用这些概念，Vuex提供了`mapState`、`mapGetters`、`mapActions`和`mapMutations`辅助函数，它们帮助开发者便捷地在组件中绑定和调用这些状态和方法。例如，`mapState`可以让组件直接绑定到store中的状态，而`...
vuex-demo:vuex中mapState、mapGetters、mapActions、mapMutations的使用
05-02
在这个"vuex-demo"项目中，我们将重点探讨Vuex中的四个核心辅助函数：`mapState`、`mapGetters`、`mapActions`和`mapMutations`，它们极大地简化了Vuex与Vue组件之间的交互。 1. **mapState** `mapState`是一个辅助...
vuex2中使用mapGetters/mapActions报错的解决方法
10-17
主要介绍了vuex2中使用mapGetters/mapActions报错解决方法 ,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
12-09
vuex的辅助函数是为了简化组件中对状态管理和动作调用的代码，比如mapState可以让我们轻松地将store中的状态映射到组件的计算属性，mapGetters则用于映射getters，mapMutations和mapActions则分别用于映射mutation和...
Vuex实践-mapState和mapGetters
01-14 4305
一.前言 　　本文章是vuex系列的最后一篇，主要总结的是如何使用mapState和mapGetters访问vuex中的state和getters。 二.多个模块中mapState和mapGetters的使用 　　上一篇文章《Vuex实践（中）》里面我们总结的就是多模块的内容，所以关于store.js、moduleA.js和moduleB.js的代码保持不变。 　　在此为了方便观看，我将这...
Vuex modules模式下mapState/mapMutations的操作实例
12-13
当我们使用 Vuex 实现全局状态维护时，可能需要将状态值划分多个模块，比如一些 root 级的用户登录状态，token，用户级的用户信息，购物车级的购物车信息。 下面我们实例演示下如何在多模块下使用 mapState/mapMutations。 modules 只作用于属性，属性会归属在相应的模块名的命名空间下。 mutations, actions, getter 没有命名空间的限定，所以要保证全局的唯一性，否则后者会覆盖前者 store/index.js import Vue from 'vue' import Vuex from 'vuex' import user fro
vuex-mutation-types-builder:Vuex的模块化方法和想法
05-11
Vuex的突变类型生成器 在vuex中生成突变类型的辅助类。 另外，您可以在其他模块中共享您创建的突变类型。 我是一名react / redux开发人员，在尝试vuex时，我应用了我在react / redux中学到的知识。 这是Redux模块启发的方法。 我们从redux书中得到了这个主意。 安装 npm install vuex-mutation-types-builder 用法： types.js import MutationTypes from 'vuex-mutation-types-builder' const types = new MutationTypes ( 'LOGIN' , 'LOGOUT' , 'REGISTER' , 'DESTROY' ) export default types 突变.js import typ
Vuex modules 模式下 mapState/mapMutations 的操作实例
lx6091543wwwcctv的博客
08-21 673
vuex modules下辅助函数怎么取值。
vuex中...mapMutations、...mapState模块化写法以后的调用方法
轻风细雨_林木木
11-03 2277
一、…mapMutations 中调用模块中的方法 里面的方法： const mutations = { // 修改状态 /** * @param {Object} state vuex默认值 * @param {Object} data 通过接口获取值 * @param {Object} data2 通过接口获取值 */ updataAction (state, data, data2) { console.log(state, '111111') cons
十一：Vuex，getters，mapState，mapGetters，mapActions，mapMutations，多组件共享数据，vuex模块化
qq_45994446的博客
10-10 216
vuex在Vue中实现集中式状态（数据）管理的一个vue插件，集中式就像一个老师给一群学生上课，状态就是数据；vuex对vue应用中多个组件的共享数据进行集中式的管理（读、写），适用于任意组件间通信多个组件依赖于同一状态时；来自不同组件的行为需要变更同一状态（数据）
vuex的用法详解，含模块化及辅助函数（mapState, mapMutations, mapActions, mapGetters）
绿葡萄的博客
04-04 353
【代码】vuex的用法详解，含模块化及辅助函数（mapState, mapMutations, mapActions, mapGetters）
vueX 内容 辅助函数 mapMutations、mapActions
放荒
03-10 479
VueX中的核心内容 state 存放状态 mutations state成员操作 getters 加工state成员给外界 actions 异步操作 modules 模块化状态管理 1: State state 看作是所有组件的data, 用于保存所有组件的公共数据. //vuex state:{ products: [] }, //vue组件 this.$store.state.products //获取store中state的数据 // 使用mapState映射 import { ma
Vuex模块化modules、mapState/Getters/Mutations/Actions的使用方法
m0_63851202的博客
01-25 3083
vuex配置项modules 当项目比较大时，所有的全局数据都存放在state里，会非常混乱，使用modules，把数据进行分类处理，即模块化 使用方法 每个模块是一个独立的store，管理着不同类型的数据，然后总体的store引入所有的分模块store即可 在分模块中： src/store/loading.js文件下 export default { namespaced:true, state:{ isLoading:f...
import { mapMutations, mapState, mapGetters } from 'vuex'
01-13
`import { mapMutations, mapState, mapGetters } from 'vuex'` 是一种在Vue.js中使用Vuex辅助函数的方式。这些辅助函数可以帮助我们简化在组件中使用Vuex的代码。 `mapMutations`函数可以将Vuex的mutations映射到...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

心醉瑶瑾前

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值