Vue.js 3 - Vue 컴포넌트 간에 데이터를 전달하고 두 뷰 모두 업데이트하려면 어떻게 해야 합니까?

Vue.js 3 - Vue 컴포넌트 간에 데이터를 전달하고 두 뷰 모두 업데이트하려면 어떻게 해야 합니까?

나는 다음을 시도했다.부모의 코멘트된 행을 확인해 주세요.새로운 상태조차 커밋하지 않는 vue입니다.그러나 다른 사용자가 여러 구성 요소가 공유하는 글로벌 상태를 위한 더 나은 솔루션으로 안내해 줄 수 있습니까?

main.discloss.main.discloss.

import { createApp } from 'vue'
import App from './App.vue'
import { createStore } from 'vuex'

const app = createApp(App);
export const store = createStore({
    state: {
        textProp: 'test',
        count: 1
    },
    mutations: {
        setState(state, newState) {
            console.log('setState');
            state = newState;
        }
    },
    getters: {
        getAll: (state) => () => {
            return state;
        }
    }

});
app.use(store);
app.mount('#app')

parent.vue

<template>
  <div class="parent">
    <div class="seperator" v-bind:key="item" v-for="item in items">
      <child></child>
    </div>
    <button @click="toonAlert()">{{ btnText }}</button>
    <button @click="veranderChild()">Verander child</button>
  </div>
</template>


<script>
import child from "./child.vue";
import {store} from '../main';

export default {
  name: "parent",
  components: {
    child,
  },
  store,
  data: function () {
    return {
      items: [
        {
          id: 1,
          valueText: "",
          valueNumber: 0,
        },
        {
          id: 2,
          valueText: "",
          valueNumber: 0,
        },
        {
          id: 3,
          valueText: "",
          valueNumber: 0,
        },
      ],
    };
  },
  props: {
    btnText: String,
  },
  methods: {
    toonAlert() {
      alert(JSON.stringify(this.$store.getters.getAll()));
    },
     veranderChild() {
       console.log('child aan het veranderen (parentEvent)');
       this.$store.commit('setState', { // This is especially not working.
             textProp: 'gezet via de parent',
             count: 99
         })
       this.$store.commit({type: 'setState'}, {
         'textProp': 'gezet via de parent',
          'count': 99
          });
    },
  },
};
</script>

<style>
.seperator {
  margin-bottom: 20px;
}

.parent {
  /* background: lightblue; */
}
</style>

child.vue

<template>
  <div class="child">
    <div class="inputDiv">
      text
      <input @change="update" v-model="deText" type="text" name="deText" />
    </div>
    <div class="inputDiv">
      nummer
      <input v-model="hetNummer" type="number" name="hetNummer" />
    </div>
    <button @click="toonState">Toon huidige state</button>
  </div>
</template>

<script>

import {store} from '../main';

export default {
  name: "child",
  store,
  data: function() {
    return {
      'hetNummer': 0
    }
  },
  methods: {
    update(e) {
      let newState = this.$store.state;
      newState.textProp = e.target.value;
      // this.$store.commit('setState', newState);
    },
    toonState()
    {
      console.log( this.$store.getters.getAll());
    }
  },
  computed: {
    deText: function() {
      return '';
      // return this.$store.getters.getAll().textProp;
    }
  }
};
</script>

<style>
.inputDiv {
  float: right;
  margin-bottom: 10px;
}
.child {
  max-width: 300px;
  height: 30px;
  margin-bottom: 20px;
  /* background: yellow; */
  margin: 10px;
}
</style>

Vue/Vuex와 무관한 JavaScript에 대해 잘못 알고 있습니다.이것은 기대했던 대로 되지 않습니다.

state = newState;

솔루션(TL;DR)

setState(state, newState) {
  Object.assign(state, newState);
}

를 설정하는 대신statevariable, 새 속성을 Marge합니다.

설명.

• JavaScript의 객체 변수는 참조입니다.그렇기 때문에 같은 개체를 참조하는 변수가 여러 개 있을 때 하나의 속성을 변경하면 모든 변수가 변이됩니다.모두 같은 기억의 대상을 가리키는 것이지 클론이 아닙니다.

그state위의 변수는 Vuex 상태 객체에 대한 참조로 시작됩니다.따라서 Vuex의 속성을 변경하면 Vuex의 상태 속성도 변환됩니다.다 좋습니다.

그러나 속성뿐만 아니라 변수 전체를 다른 것으로 변경해도 원래 참조된 개체(예: Vuex 상태)가 변환되지 않습니다.참조 링크를 끊고 새로운 참조 링크를 만듭니다.newState물건.따라서 Vuex 상태는 전혀 변하지 않습니다.여기 간단한 데모가 있습니다.

의견.

이 패턴을 피하고 다음에 개체 속성을 만듭니다.state대신.그럼 그냥 하면 되겠네state.obj = newState.

스프레드 연산자를 사용해야 합니다....다음과 같이 상태를 변환합니다.

 state = { ...state, ...newState };

라이브 예시

하지만 의미론적으로 당신의 가게를 좀 더 조직적으로 만드는 것을 추천합니다. 당신의 주에 있는 각 자산은 그들만의 것이 있어야 합니다.setter그리고.actiongetters는 옵션 API의 계산된 속성과 동등하며 여러 상태 속성에 기반할 수 있습니다.

export const store = createStore({
  state: {
   
    count: 1
  },
  mutations: {
    SET_COUNT(state, _count) {
      console.log("setState");
      state.count=_count
    },
   INC_COUNT(state) {
     
      state.count++
    }
  },
  getters: {
    doubleCount: (state) => () => {
      return state.count*2;
    }
  }
});

**주의 : ** 스토어를 Import할 필요가 없습니다.main.js사용할 수 있기 때문에 각 아이에 대해this.$storeoptions api에 포함되지만 composition api를 사용하는 경우useStore다음과 같습니다.

import {useStore} from 'vuex'
setup(){
    const store=useStore()// store instead of `$store`
}

언급URL : https://stackoverflow.com/questions/64799814/vue-js-3-how-can-i-pass-data-between-vue-components-and-let-both-views-also-up