javascript - Résolution du problème de liaison des paramètres Vuex

Question

La définition des paramètres dans le composant est la suivante

<script>
import store from '../vuex/store';

export default {
    // vuex: {
    //     actions: actions,
    //     getters: {
    //         // 过滤后的会话列表
    //         sessions: ({ sessions, filterKey }) => {
    //             let result = sessions.filter(session => session.user.name.includes(filterKey));
    //             return result;
    //         },
    //         // 当前会话index
    //         currentId: ({ currentSessionId }) => currentSessionId
    //     }
    // },
    data(){
        return {
            sessions: store.state.sessions,
            currentId: store.state.currentSessionId
        }
    },
    methods:{
        selectSession(id){
            console.log(id);
            store.dispatch('selectSession', id)
        }
    }
};
</script>

<template>
<p class="list">
    <ul>
        <li v-for="item in sessions"  :class="{ active: item.id === currentId }" @click="selectSession(item.id)">
            <img class="avatar"  width="30" height="30" :alt="item.user.name" :src="item.user.img">
            <p class="name">{{item.user.name}}</p>
        </li>
    </ul>
</p>
</template>

La définition des sessions peut-elle être liée de manière bidirectionnelle ? J'ai constaté que lorsque la méthode selectSession était exécutée, les sessions ne changeaient pas.

Answer 1

vuex 官方文档不是这么绑定数据的哦，数据监听放在 computed里面，而不是直接放在 data 的方法里面，而且 vuex C'est ainsi que fonctionne le traitement bidirectionnel du formulaire.

//来自 vuex 官方例子

<input v-model="message">
// js
computed: {
  message: {
    get () {
      return this.$store.state.obj.message
    },
    set (value) {
      this.$store.commit('updateMessage', value)
    }
  }
}

J'espère que cela vous aidera~~~