Javascript Vuex存储状态未更新屏幕/Vue本机

我正在使用Vue Native构建一个具有多个屏幕的简单应用程序（使用Vue Native Router）。我的情况是，我连接到屏幕a中的WebSocket，它监听消息，我需要这些更新在屏幕a和屏幕B中可用

因此，在我对全局变量和原型属性没有把握之后，我遇到了Vuex，它似乎正是我所需要的

事实上，它可以很好地更新屏幕上的属性，但它似乎没有反应性，无法更新屏幕

store.js：

import Vue from "vue-native-core";
import Vuex from "vuex"
Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        imageUri: ["", "", "", ""]
    },
    mutations: {
      updateImage (state, data) {
        state.imageUri[data.index] = data.url;
      }
    }
  });

脚本标记中的ScreenA.vue：

import store from "./store.js"

export default {
  [...]
  methods: {
    [...]
    handleMessage: function(message){
      var data = message.data.split("#", 2);
      var value = data[1];
      console.log("New msg");


      if(data[0] == "init"){
        this.connectionMs = Date.now()-value;
        this.connectionStatus = 2;
      }else if(data[0] == "img"){
        var current = this.cImg;
        this.cImg = (this.cImg+1)%4;
        var dataUrl = "data:image/jpeg;base64,"+value.substring(2, value.length-1);
        store.commit('updateImage', {index: current, url: dataUrl}); //<- Relevant line
      }
    },
    [...]
  }
}

从“/store.js”导入存储
导出默认值{
[...]
方法：{
[...]
handleMessage:函数（消息）{
var data=message.data.split（“#”，2）；
var值=数据[1]；
控制台日志（“新消息”）；
如果（数据[0]=“初始”）{
this.connectionMs=Date.now（）-值；
this.connectionStatus=2；
}否则如果（数据[0]=“img”）{
无功电流=此。cImg；
this.cImg=（this.cImg+1）%4；
var dataUrl=“data:image/jpeg；base64，”+value.substring（2，value.length-1）；
store.commit（'updateImage'，{index:current，url:dataUrl}）；//您的变体仅更新
状态。imageUri[data.index]
，它不会更改
状态的引用。imageUri
。这意味着
状态。imageUri
仍然指向旧引用，Vue无法检测到此更新。这是其中之一

一种解决方案是使用
JSON.parse（JSON.stringify（））
制作
state.imageUri
数组的深度副本

 export default new Vuex.Store({
        state: {
            imageUri: ["", "", "", ""]
        },
        mutations: {
          updateImage (state, data) {
            state.imageUri[data.index] = data.url;
            state.imageUri = JSON.parse(JSON.stringify(state.imageUri))
          }
        }
      });

 export default new Vuex.Store({
        state: {
            imageUri: ["", "", "", ""]
        },
        mutations: {
          updateImage (state, data) {
            state.imageUri[data.index] = data.url;
            state.imageUri = JSON.parse(JSON.stringify(state.imageUri))
          }
        }
      });