vuex的index.js【原版写法】
//改文件用于创建Vuex中最为核心的store
//引入Vue
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//准备actions - 用于响应组件中的动作
const actions = {
// add与reduce的调用也仅此为了传递commit给mutations。
// 所以我们前边直接使用了 this.$store.commit 根本不需要经过actions
// add(context, value) {
// context.commit('ADD', value)
// },
// reduce(context, value) {
// context.commit('SUB', value)
// },
jishujia: function (context, value) {
if (context.state.sum % 2 == 1) {
console.log("actions里的jia调用");
context.commit('JIUSHUJIA', value)
}
},
waitjia: function (context, value) {
setTimeout(() => {
console.log("actions里的jia调用");
context.commit('WAITJIA', value)
}, 500);
}
}
//准备mutations- 用于操作数据(state)
const mutations = {
JIA(state, value) {
state.sum += value
console.log("commit中的JIA调用")
},
JIAN(state, value) {
state.sum -= value
console.log("commit中的JIAN调用")
},
JIUSHUJIA(state, value) {
state.sum += value
console.log("commit中的JIUSHUJIA调用")
},
WAITJIA(state, value) {
state.sum += value
console.log("commit中的WAITJIA调用")
},
ADD_PERSON(state, value) {
state.personlist.unshift(value)
console.log("commit中的ADD_PERSON调用")
}
}
//准备state - 用于存储数据
const state = {
sum: 2,//初始数据为0
personlist: [
{ id: '001', name: '张三' }
],
}
//1.使用插件
Vue.use(Vuex)
//2.创建并暴露store
export default new Vuex.Store({
actions,
mutations,
state
})
vuex的index.js【模块化写法】
//改文件用于创建Vuex中最为核心的store
//引入Vue
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//求和相关的配置
const countOptions = {
namespaced: true,
actions: {
jishujia: function (context, value) {
if (context.state.sum % 2 == 1) {
console.log("actions里的jia调用");
context.commit('JIUSHUJIA', value)
}
},
waitjia: function (context, value) {
setTimeout(() => {
console.log("actions里的jia调用");
context.commit('WAITJIA', value)
}, 500);
}
},
mutations: {
JIA(state, value) {
state.sum += value
console.log("commit中的JIA调用")
},
JIAN(state, value) {
state.sum -= value
console.log("commit中的JIAN调用")
},
JIUSHUJIA(state, value) {
state.sum += value
console.log("commit中的JIUSHUJIA调用")
},
WAITJIA(state, value) {
state.sum += value
console.log("commit中的WAITJIA调用")
}
},
state: {
sum: 2,//初始数据为0
},
getters: {
}
}
//人员管理相关的配置
const personOptions = {
namespaced: true,
actions: {
},
mutations: {
ADD_PERSON(state, value) {
state.personlist.unshift(value)
console.log("commit中的ADD_PERSON调用")
}
},
state: {
personlist: [
{ id: '001', name: '张三' }
],
},
getters: {
}
}
//1.使用插件
Vue.use(Vuex)
//2.创建并暴露store
export default new Vuex.Store({
modules: {
countAbout: countOptions,
personAbout: personOptions
}
})
把该放的东西放到固定位置:并加上命名空间:【namespaced: true】
//人员管理相关的配置
const personOptions = {
namespaced: true,
actions: { },
mutations: { },
state: {},
getters: { }
}
其次我们引入了 两个管理配置名:countAbout与personAbout就意味着不能再直接找store下的三个核心配置项 Actions,Mutations,State。必须加入一层关系,vue执行时就会疑惑,你到底要找countAbout下的配置项还是personAbout下的,所以前边的写法也得改。
countAbout: countOptions,
personAbout: personOptions
Count.vue组件:
<template>
<div>
<h1>当前求和为{{ sum }}</h1>
<h1 style="color: red">Person组件列表的总人数为{{ personlist.length }}</h1>
<select v-model="number">
<option :value="1">1</option>
<option :value="2">2</option>
<option :value="3">3</option>
</select>
<button @click="add(number)">+</button>
<button @click="reduce(number)">-</button>
<button @click="odd_add(number)">当前求和为奇数再加</button>
<button @click="wait(number)">等2s再显示数据</button>
</div>
</template>
<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
name: "Count",
data() {
return {
number: 1, //用户选择的数字
};
},
computed: {
...mapState("countAbout", ["sum"]),
...mapState("personAbout", ["personlist"]),
},
methods: {
// add() {
// this.$store.commit("JIA", this.number);
// },
// reduce() {
// this.$store.commit("JIAN", this.number);
// },
// odd_add() {
// this.$store.dispatch("jishujia", this.number);
// },
// wait() {
// this.$store.dispatch("waitjia", this.number);
// },
//上边为旧的实现方式 --- 下边为新的写法
//借助mapMutations生成对应的方法,方法中会调用commit去联系mutation(对象写法)
...mapMutations("countAbout", { add: "JIA", reduce: "JIAN" }),
//借助mapActions生成对应的方法,方法中会调用dispathch去联系actions(对象写法)
...mapActions("countAbout", { odd_add: "jishujia", wait: "waitjia" }),
},
};
</script>
<style lang="css" scoped>
button {
margin-left: 5px;
}
</style>
这里需要关注的重点为:
computed: {
...mapState("countAbout", ["sum"]),
...mapState("personAbout", ["personlist"]),
},
1.前边直接加入了 a(countAbout):sum,b(personAbout):personlist,其中前边的a,b就是我们写配置项时为了区分每一个模块而单独写的名字。所以第一个mapstate找的这个sum就是countAbout中的,这样详细区分,项目庞大时也能很清楚的找到自己需要改的地方。
methods: {
// add() {
// this.$store.commit("JIA", this.number);
// },
// reduce() {
// this.$store.commit("JIAN", this.number);
// },
// odd_add() {
// this.$store.dispatch("jishujia", this.number);
// },
// wait() {
// this.$store.dispatch("waitjia", this.number);
// },
//上边为旧的实现方式 --- 下边为新的写法
//借助mapMutations生成对应的方法,方法中会调用commit去联系mutation(对象写法)
...mapMutations("countAbout", { add: "JIA", reduce: "JIAN" }),
//借助mapActions生成对应的方法,方法中会调用dispathch去联系actions(对象写法)
...mapActions("countAbout", { odd_add: "jishujia", wait: "waitjia" }),
2.methods里边借助了mapActions与mapMutations生成对应的方法,但是前边也应该通知自己寻找的是countAbout下的还是personAbout下的,参照注释来看能够理解的更快。
<button @click="add(number)">+</button>
<button @click="reduce(number)">-</button>
<button @click="odd_add(number)">当前求和为奇数再加</button>
<button @click="wait(number)">等2s再显示数据</button>
3.如果点击事件这里不自己传这个number值,将会默认把value值传进去,而这个value值是一个鼠标事件,所以就会发生这个奇怪的bug,可以自己尝试一下。
Person组件:
<template>
<div>
<h1>人员列表</h1>
<h1 style="color: red">Count组件列表的求和为{{ sum }}</h1>
<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 { mapState } from "vuex";
import { nanoid } from "nanoid";
export default {
name: "Person",
data() {
return {
name: "",
};
},
computed: {
// personlist() {
// return this.$store.state.personlist;
// },
...mapState("personAbout", ["personlist"]),
...mapState("countAbout", ["sum"]),
},
methods: {
add() {
const personobj = { id: nanoid(), name: this.name };
console.log(personobj);
this.name = " ";
this.$store.commit("personAbout/ADD_PERSON", personobj);
},
},
};
</script>
<style>
</style>
这里有一个很奇怪的写法:personAbout/ADD_PERSON 而不是personAbout.ADD_PERSON
this.$store.commit("personAbout/ADD_PERSON", personobj);
但是如果说这里要使用正常写法而不是生成的话
computed: {
// personlist() {
// return this.$store.state.personlist;
// },
...mapState("personAbout", ["personlist"]),
...mapState("countAbout", ["sum"]),
},
// return this.$store.state.personAbout.personlist; 找到state下的【personAbout】或者【countAbout】然后才能查找下一级。
还是自己调试一下看看,才能发现更多的问题。