如何从外部更新Vuex Store？iOS WebView注入JS修改数据无响应求助

我来帮你排查下这个问题，核心原因是你的Vue组件没有响应式地绑定Vuex Store的state，另外还要确保customerStore在全局上下文可访问。下面分步骤解决：

1. 组件未响应Vuex state变化的问题 #

你的ListCustomersPage组件里，items是在data()中直接赋值为customerStore.state.data的初始值——这是一次性的赋值，Vue不会自动追踪后续Vuex state的变化来更新这个变量。所以即使你通过注入JS修改了Vuex的state，组件的items还是原来的旧值，页面自然不会变。

修复方案：改用计算属性（推荐） #

把items改成计算属性，这样它会自动依赖Vuex的state，当state变化时自动更新：

const ListCustomersPage = {
  key: 'ListCustomersPage',
  template: '#ListCustomersPage',
  components: { toolbar, cellcustomer },
  data() {
    return {
      title: 'Select Customer'
    }
  },
  // 用computed替代data里的items
  computed: {
    items() {
      return customerStore.state.data;
    }
  },
  methods: {
    push() { }
  }
};

备选方案：手动订阅Store变化 #

如果你不想用计算属性，也可以在组件挂载时订阅Vuex的mutation，手动更新items：

const ListCustomersPage = {
  key: 'ListCustomersPage',
  template: '#ListCustomersPage',
  components: { toolbar, cellcustomer },
  data() {
    return {
      title: 'Select Customer',
      items: customerStore.state.data
    }
  },
  mounted() {
    // 订阅Store的变化，当触发list mutation时更新items
    this.unsubscribe = customerStore.subscribe((mutation, state) => {
      if (mutation.type === 'list') {
        this.items = state.data;
      }
    });
  },
  beforeUnmount() {
    // 组件销毁前取消订阅，避免内存泄漏
    this.unsubscribe();
  },
  methods: {
    push() { }
  }
};

2. 确保customerStore在全局可访问 #

注入的JavaScript是在WebView的全局上下文执行的，如果你的customerStore只是局部变量（没有挂载到window上），注入的代码会找不到这个变量——虽然不会报错，但代码等于没执行。

所以要在Vue代码里把customerStore挂载到全局：

const customerStore = new Vuex.Store({ /* ...你的Store配置... */ });
// 挂载到window，让全局上下文能访问到
window.customerStore = customerStore;

3. 验证注入代码是否执行 #

可以在注入的代码里加个日志，然后通过WebView的调试工具（比如Chrome的远程调试）查看控制台，确认代码是否真的执行了：

web.InjectJavascriptAsync("console.log('执行注入的代码'); customerStore.commit('list', []);").Start();

这样调整后，你再执行注入代码，页面的列表应该就能正常更新了。

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