解决v-model绑定的是Vuex里的state中的数据

47 阅读1分钟

例题:动态添加人员(并清空数据)

//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>