例题:动态添加人员(并清空数据)
//store/person.js
export default {
namespaced:true,
actions:{
addPerson(context,value){
if(value === "" || !value.trim()) return alert('值不能为空');
let person = {name:value, age:Math.floor(Math.random()*(30-10)+10)};
context.commit('ADD_PERSON',person);
context.state.name = ""
}
},
mutations:{
GET_REVAMP_DATA(state,value){ //将input框输入的值,赋值给state里的name
state.name = value
},
ADD_PERSON(state,value) { //点击添加成员
state.persons.unshift(value);
}
},
state:{
name:"", // v-model的数据
persons:[] //成员列表
},
getters:{
revampData(state) { //传递state里的name数据
return state.name
}
}
}
//store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
import personOptions from './person'
Vue.use(Vuex);
export default new Vuex.Store({
modules:{
personAbout: personOptions,
}
})
//MyPerson.vue
<template>
<div>
<input type="text" placeholder="请输入值" v-model="value">
<button @click="addPerson(value)">点击添加新人员</button>
<ul>
<li v-for="(person, index) in persons" :key="index">姓名:{{ person.name }};年龄:{{ person.age }}</li>
</ul>
</div>
</template>
<script>
import { mapState,mapGetters,mapMutations,mapActions } from 'vuex';
export default {
name: 'MyPerson',
computed:{
...mapState("personAbout",['persons']),
...mapGetters('personAbout',['revampData']),
value:{ //input框的v-model数据
get(){ //将获取到的值输出
return this.revampData
},
set(val){ //如果有改动,输出改动的值
this.GET_REVAMP_DATA(val)
}
}
},
methods:{
...mapMutations('personAbout',['GET_REVAMP_DATA']),
...mapActions('personAbout',['addPerson'])
}
};
</script>