1.Person.vue
<template>
<div>
<h1>人员列表</h1>
<h1 style="color: red;">Count 组件的求和为{{ sum }}</h1>
<input type="text" placeholder="请输入名字" v-model="name"><button @click="addPerson">添加</button>
<ul v-for="p in personList" :key="p.id">
<li>{{ p.name }}</li>
</ul>
</div>
</template>
<script>
import { mapState } from 'vuex'
import { nanoid } from 'nanoid'
export default {
name:'Person',
data(){
return {
name:""
}
},
computed:{
...mapState(['personList','sum'])
},
methods:{
addPerson(){
const personObj={id:nanoid(),name:this.name}
console.log(personObj)
this.$store.commit('ADD_PERSON',personObj)
this.name='';
}
}
}
</script>
<style>
</style>
2. Count.vue
<template>
<div>
<h1>当前求和位{{ sum}}</h1>
<h1>当前求和放大10倍后是{{ bigSum }}</h1>
<h1>我在{{school }},学习{{ subject }}</h1>
<h3 style="color: red;">PersonList 组件的总人数是{{ personList.length }}</h3>
<select v-model.number="n">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</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:{
// 靠程序员自己去写计算属性
// qiuhe(){
// return this.$store.state.sum
// },
// xuexiao(){
// return this.$store.state.school
// },
// xueke(){
// return this.$store.state.subject
// }
//借助mapState 生成计算属性从 state 中读取数据 对象写法
//...mapState({sum:'sum',school:'school',subject:'subject'})
//借助mapState 生成计算属性从 state 中读取数据 数组写法
...mapState(['sum','school','subject','personList']),
//借助mapGetters 生成计算属性从 state 中读取数据 对象写法
//...mapGetters({bigSum:'bigSum'})
//借助mapGetters 生成计算属性从 state 中读取数据 数组写法
...mapGetters(['bigSum']),
},
mounted(){
console.log('countvue',this)
},
methods:{
// 程序猿亲自写方法
// increment(){
// //this.$store.dispatch('jia',this.n)
// this.$store.commit('JIA',this.n)
// },
// decrement(){
// //this.$store.dispatch('jian',this.n)
// this.$store.commit('JIAN',this.n)
// },
//mapMutations 生成对应的方法防 方法中会调用commit去联系mutations 对象写法
...mapMutations({increment:'JIA',decrement:'JIAN'}),
//mapMutations 生成对应的方法防 方法中会调用commit去联系mutations 数组写法
//...mapMutations({'JIA','JIAN'})
// incrementOdd(){
// this.$store.dispatch('incrementOdd',this.n)
// },
// incrementWait(){
// this.$store.dispatch('incrementWait',this.n)
// }
// 借助mapActions 生成对应的方法，方法中会调用dispatch 方法去联系actions 对象写法
//...mapActions({incrementOdd:'incrementOdd',incrementWait:'incrementWait'}),
// 借助mapActions 生成对应的方法，方法中会调用dispatch 方法去联系actions 数组写法
...mapActions(['incrementOdd','incrementWait'])
}
}
</script>
<style>
button{
margin-left: 10px;
}
</style>
3. App.vue
//改文件用于创建vuex 最为核心的 store
import Vue from 'vue'
//引入vuex
import Vuex from 'vuex'
Vue.use(Vuex)
// 准备actions ---用于响应组件中的动作
const actions={
// 没有逻辑 可以直接 mutations
jia(conext,value){
//console.log("actions里面的jia被调用了",conext,value)
conext.commit('JIA',value)
},
jian(conext,value){
//console.log("actions里面的jian被调用了",conext,value)
conext.commit('JIAN',value)
},
incrementOdd(conext,value){
//console.log("actions里面的incrementOdd被调用了",conext,value)
if(conext.state.sum%2){
conext.commit('JIA',value)
}
},
incrementWait(conext,value){
//console.log("actions里面的incrementWait被调用了",conext,value)
setTimeout(() => {
conext.commit('JIA',value)
}, 500);
},
}
//准备mutations--用于操作数据（state）
const mutations={
JIA(state,value){
//console.log("mutations里面的jia被调用了",state,value)
state.sum+=value
},
JIAN(state,value){
//console.log("mutations里面的jian被调用了",state,value)
state.sum-=value
},
ADD_PERSON(state,value){
console.log("mutations里面的ADD_PERSON被调用了",state,value)
state.personList.unshift(value)
}
}
//准备state --用于存储数据
const state={
sum:0,
school:"尚硅谷",
subject:"前端",
personList:[{id:'1',name:'李四'}]
}
// 准备getters 用于将state 中的数据进行加工
const getters = {
bigSum(state){
return state.sum * 10
}
}
// 创建store 暴露store
export default new Vuex.Store({
actions,
mutations,
state,
getters
})
4.store/index.js
//改文件用于创建vuex 最为核心的 store
import Vue from 'vue'
//引入vuex
import Vuex from 'vuex'
Vue.use(Vuex)
// 准备actions ---用于响应组件中的动作
const actions={
// 没有逻辑 可以直接 mutations
jia(conext,value){
//console.log("actions里面的jia被调用了",conext,value)
conext.commit('JIA',value)
},
jian(conext,value){
//console.log("actions里面的jian被调用了",conext,value)
conext.commit('JIAN',value)
},
incrementOdd(conext,value){
//console.log("actions里面的incrementOdd被调用了",conext,value)
if(conext.state.sum%2){
conext.commit('JIA',value)
}
},
incrementWait(conext,value){
//console.log("actions里面的incrementWait被调用了",conext,value)
setTimeout(() => {
conext.commit('JIA',value)
}, 500);
},
}
//准备mutations--用于操作数据（state）
const mutations={
JIA(state,value){
//console.log("mutations里面的jia被调用了",state,value)
state.sum+=value
},
JIAN(state,value){
//console.log("mutations里面的jian被调用了",state,value)
state.sum-=value
},
ADD_PERSON(state,value){
console.log("mutations里面的ADD_PERSON被调用了",state,value)
state.personList.unshift(value)
}
}
//准备state --用于存储数据
const state={
sum:0,
school:"尚硅谷",
subject:"前端",
personList:[{id:'1',name:'李四'}]
}
// 准备getters 用于将state 中的数据进行加工
const getters = {
bigSum(state){
return state.sum * 10
}
}
// 创建store 暴露store
export default new Vuex.Store({
actions,
mutations,
state,
getters
})