如何通过Vuex Getters代理数据至Computed属性实现v-model绑定？

首先咱们得先理清楚核心问题：你原来的组件里用computed的get/set实现了v-model和组件data的双向绑定，现在想把这层逻辑搬到Vuex里，但之前的尝试有几个关键问题——Vuex的getter本质是状态的"计算属性"，只能用来读取状态，不能直接包含修改逻辑；而且getter里的this并不是组件实例，没法访问组件的loading_cell_phone_number。

下面是正确的实现方案，分两步走：

第一步：完善Vuex仓库的结构 #

Vuex的核心是state（存数据）、mutations（改数据的唯一入口）、getters（读数据的计算属性）。你之前的仓库缺少了状态存储和修改逻辑，先补上：

// Vuex仓库：tracker.js
const state = {
  // 定义存储手机号的状态，替代组件里的loading_cell_phone_number
  loadingCellPhoneNumber: ''
};

const mutations = {
  // 定义修改状态的mutation，只能通过commit调用
  UPDATE_CELL_PHONE_NUMBER(state, value) {
    state.loadingCellPhoneNumber = value;
  }
};

const getters = {
  // 定义获取状态的getter
  cellPhoneNumber: (state) => state.loadingCellPhoneNumber
};

export default {
  state,
  mutations,
  getters
};

第二步：修改组件的computed属性 #

组件里的cell_phone_number需要同时对接Vuex的getter（读）和mutation（写），才能让v-model正常工作。这里有两种写法，选你习惯的就行：

写法一：用map辅助函数简化 #

<template>
  <InputTextApp 
    class="inputTextAdditionData" 
    placeholder_text="" 
    v-model="cell_phone_number"
  />
</template>

<script>
import InputTextApp from '~/components/FormElements/InputTextApp';
import { mapGetters, mapMutations } from 'vuex';

export default {
  components: { InputTextApp },
  computed: {
    // 映射Vuex的getter
    ...mapGetters("tracker", ["cellPhoneNumber"]),
    // 实现v-model需要的get/set
    cell_phone_number: {
      get() {
        return this.cellPhoneNumber; // 从Vuex getter拿值
      },
      set(value) {
        this.updateCellPhoneNumber(value); // 调用mutation修改状态
      }
    }
  },
  methods: {
    // 映射Vuex的mutation，取个易懂的别名
    ...mapMutations("tracker", {
      updateCellPhoneNumber: "UPDATE_CELL_PHONE_NUMBER"
    })
  }
}
</script>

写法二：直接调用$store（更直观） #

如果不想用map辅助函数，直接通过this.$store操作也可以：

<template>
  <InputTextApp 
    class="inputTextAdditionData" 
    placeholder_text="" 
    v-model="cell_phone_number"
  />
</template>

<script>
import InputTextApp from '~/components/FormElements/InputTextApp';

export default {
  components: { InputTextApp },
  computed: {
    cell_phone_number: {
      get() {
        // 直接从Vuex getter获取状态
        return this.$store.getters['tracker/cellPhoneNumber'];
      },
      set(value) {
        // 直接commit mutation修改状态
        this.$store.commit('tracker/UPDATE_CELL_PHONE_NUMBER', value);
      }
    }
  }
}
</script>

为什么之前的尝试不行？ #

• Vuex的getter只能返回状态（或状态的计算值），不能返回带get/set的对象——因为getter本身是只读的，修改状态必须通过mutation。
• 你在getter里用this.loading_cell_phone_number是无效的，getter的上下文是Vuex的store实例，不是组件实例，根本访问不到组件的data。

这样改造后，组件的v-model就能正常和Vuex的状态双向绑定了，完美替代你最开始的computed逻辑~

内容的提问来源于stack exchange，提问作者Mikhail Krivosheev