javascript - vuex 參數綁定問題求解

Question

元件中參數的定義像如下寫的這樣

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

其中sessions的定義能不能雙向綁定呢， 我發現selectSession 方法執行的時候， sessions並沒有改變,是不是哪裡沒有寫對呢。

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

希望對你有幫助~~~