App.vue
<template>
<div>
<Count />
<Person />
</div>
</template>
<script>
import Count from "./components/Count.vue";
import Person from "./components/Person.vue";
export default {
components: {
Count,
Person,
},
};
</script>
<style>
</style>
Count.vue
<template>
<div>
<h2>当前的和为:{{ sum }}</h2>
<h5>放大后的和为:{{ dSum }}</h5>
<h4>Person组件的总人数为:{{ count }}</h4>
<h3>我在{{ school }}学习{{ subject }}</h3>
<select v-model.number="num">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button @click="ADDNUM(num)">+</button>
<button @click="SUBNUM(num)">-</button>
<button @click="OddNum(num)">当前和为奇数再加</button>
<button @click="delay(num)">等一等再加</button>
</div>
</template>
<script>
// 映射状态
import { mapState, mapMutations, mapActions, mapGetters } from "vuex";
export default {
data() {
return {
num: 1, //选择的数字
};
},
methods: {
// ...mapMutations("sumOptions", ["ADDNUM", "SUBNUM"]),
...mapMutations("sumOptions", { ADDNUM: "ADDNUM", SUBNUM: "SUBNUM" }),
...mapActions("sumOptions", ["OddNum", "delay"]),
},
computed: {
...mapState("sumOptions", ["sum", "school", "subject"]),
...mapState("personOptions", ["dataList"]),
...mapGetters("sumOptions", ["dSum"]),
...mapGetters("personOptions", ["count"]),
},
};
</script>
<style>
</style>
Person.vue
<template>
<div>
<h3>Count组件的和为:{{ sum }}</h3>
<h2>人员列表</h2>
<input type="text" placeholder="请输入姓名" v-model="name" />
<button @click="addP">添加</button>
<button @click="addW">添加王姓的人</button>
<ul>
<li v-for="item in dataList" :key="item.id">{{ item.name }}</li>
</ul>
<p>此人姓:{{ firstName }}</p>
<p>总人数:{{ count }}</p>
</div>
</template>
<script>
import { nanoid } from "nanoid";
// import { mapState, mapMutations, mapGetters } from "vuex";
export default {
computed: {
/* ...mapState("personOptions", ["dataList"]),
...mapState("sumOptions", ["sum"]),
...mapGetters("personOptions", ["count",'firstName']), */
dataList() {
return this.$store.state.personOptions.dataList;
},
sum() {
return this.$store.state.sumOptions.sum;
},
// 访问getters里面的数据方式有点特殊
count() {
return this.$store.getters["personOptions/count"];
},
firstName() {
return this.$store.getters["personOptions/firstName"];
},
},
data() {
return {
name: "",
};
},
methods: {
// ...mapMutations("personOptions", ["ADDPERSON"]),
addP() {
const obj = {
id: nanoid(),
name: this.name,
};
// this.ADDPERSON(obj);
this.$store.commit("personOptions/ADDPERSON", obj);
this.name = "";
},
addW() {
const obj = {
id: nanoid(),
name: this.name,
};
this.$store.dispatch("personOptions/addPerson", obj);
this.name = "";
},
},
};
</script>
<style>
</style>
Count.js
export default {
// 命名空间
namespaced: true,
state: {
sum: 0, //和
school: 'XXX学院',
subject: '前端',
},
getters: {
dSum(state) {
return state.sum * 10
}
},
mutations: {
ADDNUM(state, val) {
state.sum += val
},
SUBNUM(state, val) {
state.sum -= val
},
},
actions: {
OddNum(context, val) {
if (context.state.sum % 2) {
context.commit('ADDNUM', val)
}
},
delay(context, val) {
setTimeout(() => {
context.commit('ADDNUM', val)
}, 500);
}
}
};
Person.js
export default {
namespaced: true,
state: {
dataList: [
{ id: '01', name: '张三' },
{ id: '02', name: '李四' }
]
},
getters: {
count(state) {
return state.dataList.length
},
firstName(state) {
return state.dataList[0].name.slice(0, 1)
}
},
mutations: {
ADDPERSON(state, val) {
state.dataList.unshift(val)
}
},
actions: {
addPerson(context, val) {
if (val.name.indexOf('王') === 0) {
context.commit('ADDPERSON', val)
} else {
alert('添加的不是王姓')
}
}
}
}
Index.js
// store
// 引入vuex、vue
import Vuex from 'vuex'
import Vue from 'vue'
import personOptions from "./Person"
import sumOptions from "./Count"
// 使用vuex
Vue.use(Vuex);
/* // 准备actions——用于响应组件中的动作
const actions = {
OddNum(context, val) {
if (context.state.sum % 2) {
context.commit('ADDNUM', val)
}
},
delay(context, val) {
setTimeout(() => {
context.commit('ADDNUM', val)
}, 500);
}
};
// 准备mutations——用于操作数据(state)
const mutations = {
ADDNUM(state, val) {
state.sum += val
},
SUBNUM(state, val) {
state.sum -= val
},
ADDPERSON(state, val) {
state.dataList.unshift(val)
}
};
// 准备state——用于存储数据
const state = {
sum: 0, //和
school: 'XXX学院',
subject: '前端',
dataList: [
{ id: '01', name: '张三' },
{ id: '02', name: '李四' }
]
};
// 准备getters——用于将state中的数据进行加工处理,相当于vue中的computed计算属性
const getters = {
dSum(state) {
return state.sum * 10
}
}; */
// 求和功能相关的配置
/* const sumOptions = {
// 命名空间
namespaced: true,
state: {
sum: 0, //和
school: 'XXX学院',
subject: '前端',
},
getters: {
dSum(state) {
return state.sum * 10
}
},
mutations: {
ADDNUM(state, val) {
state.sum += val
},
SUBNUM(state, val) {
state.sum -= val
},
},
actions: {
OddNum(context, val) {
if (context.state.sum % 2) {
context.commit('ADDNUM', val)
}
},
delay(context, val) {
setTimeout(() => {
context.commit('ADDNUM', val)
}, 500);
}
}
}; */
// 与人员功能相关的配置
/* const personOptions = {
namespaced: true,
state: {
dataList: [
{ id: '01', name: '张三' },
{ id: '02', name: '李四' }
]
},
getters: {
count(state) {
return state.dataList.length
},
firstName(state) {
return state.dataList[0].name.slice(0, 1)
}
},
mutations: {
ADDPERSON(state, val) {
state.dataList.unshift(val)
}
},
actions: {
addPerson(context, val) {
if (val.name.indexOf('王') === 0) {
context.commit('ADDPERSON', val)
} else {
alert('添加的不是王姓')
}
}
}
} */
// 创建并导出vuex
export default new Vuex.Store({
/* actions,
mutations,
state,
getters */
// 模块
modules: {
sumOptions: sumOptions,
personOptions: personOptions
}
})