Javascript – Problemlösung für Vuex-Parameterbindung

Question

Die Definition der Parameter in der Komponente ist wie folgt

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

Kann die Definition von Sitzungen bidirektional gebunden werden? Ich habe festgestellt, dass sich die Sitzungen bei der Ausführung der Methode nicht geändert haben.

Answer 1

vuex 官方文档不是这么绑定数据的哦，数据监听放在 computed里面，而不是直接放在 data 的方法里面，而且 vuex 对表单的双向处理是这样子的。

//来自 vuex 官方例子

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

希望对你有帮助~~~