Vuex 스토어 상태가 업데이트되지 않음 화면 / Vue-Native

Vuex 스토어 상태가 업데이트되지 않음 화면 / Vue-Native

Vue-Native를 사용하여 여러 화면이 있는 간단한 응용 프로그램을 구축하고 있습니다(Vue Native Router 사용).그리고 저는 A 화면에서 메시지를 수신하는 웹 소켓에 연결하는 상황이 있으며 이러한 업데이트를 A 화면과 B 화면에서 사용할 수 있어야 합니다.

그래서 글로벌 변수와 프로토타입 속성에 대한 운이 없었던 후, 저는 Vuex를 만나게 되었습니다. 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;
      }
    }
  });

화면 A.vue in script-Tag:

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
      }
    },
    [...]
  }
}

화면 B.값:

<template>
    <view :style="{marginTop: 40}">
        <image resizeMode="contain" :style="{ width: '100%', height: 200 }" :source="{uri: imageUri[0]}"/>
        <image resizeMode="contain" :style="{ width: '100%', height: 200 , marginTop: -200}" :source="{uri: imageUri[1]}"/>
        <image resizeMode="contain" :style="{ width: '100%', height: 200 , marginTop: -200}" :source="{uri: imageUri[2]}"/>
        <image resizeMode="contain" :style="{ width: '100%', height: 200 , marginTop: -200}" :source="{uri: imageUri[3]}"/>
        <touchable-opacity :on-press="btnPress">
            <text>Press me! {{imageUri[0]}}</text>
        </touchable-opacity>
    </view>
</template>

<script>
import store from "./store.js"

export default {
    props: {
        navigation: {
            type: Object
        }
    },
    computed:{
        imageUri: function(){
            return store.state.imageUri;
        }
    },
    methods: {
        btnPress: function(){
            console.log("ImgUrl0 -> "+this.imageUri[0]);
        },
    },
}
</script>

계산된 속성은 저장소의 vuex 상태가 변경되는 즉시(console.log에서 새 값이 인쇄됨) 올바르게 업데이트되지만 화면에 렌더링된 데이터(텍스트 및 이미지 요소)는 이전 데이터와 함께 유지됩니다.

이 문제를 해결할 방법이 있습니까?화면 전체에서 동적 데이터를 동기화하는 완전히 다른 접근 방식이 아닐까요?

당신의 돌연변이는 업데이트만 합니다.state.imageUri[data.index]의 참조는 변경되지 않습니다.state.imageUri그것은state.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))
          }
        }
      });

언급URL : https://stackoverflow.com/questions/51912947/vuex-store-state-not-updating-screen-vue-native