vuex 是用來集中處理資料的地方，假設我們要管理 user 資料，透過 getters 顯示資料，透過 commit 觸發 mutations 裡的 function 改變 user 資料

vuex

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
      user: {
          name: ''
      }
  },
  getters: {
      user(state) {
          return state.user
      }
  },
  mutations: {
      updateName(state, payload) {
          state.user.name = payload
      }
  }
});

html

<input :value="user.name" @input="updateName">

js

// ...
computed: {
    user(){
        return this.$store.getters.user
    }
},
methods: {
  updateName (e) {
    this.$store.commit('updateName', e.target.value)
  }
}

來自好想的 C 先生 - Chris 留言提出了更簡潔的寫法

<input :value="$store.getters.user.name" @input="$store.commit('updateName', $event.target.value)">