vuex로 component form, 부모와 자식 상호 bind

13411 단어 Vue.jsゔ그림x
git
htps : // 기주 b. 코 m / 복권 y / ゔ x-s dy / t 에 / 아 2049726 에 7 에 6 2c62c1

하고 싶은 일



부모와 자식은 서로 bind하고 싶습니다.

어느 input box에 넣어도 전부 리액티브하게 움직이는 상태.



vuex computed에서 할 경우 get / set 필요



vuex modules를 사용하고 있습니다.

main.js
import Vue from 'vue'
import Vuex from 'vuex'
import App from './App.vue'
Vue.use(Vuex)

// import store from './store.js'
import store from './store_module.js'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  store,
}).$mount('#app')

store.js
다른 공부도 했기 때문에 쓰레기 투성이
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
      moduleA: {
          namespaced: true,
          state: {
              count: 0,
              mymsgDict: "mAAAAAAAAAAAAAAAAAAA ymsgDict init",
              mymsg: " AAAAAAAAAAAAAAAAAAAAAAA mymsg init"
          },
          mutations: {
              increment(state) {
                  state.count++
              },
              setMsgDict(state, payload) {
                  state.mymsgDict = payload.message;
              },
              setMsg(state, payload) {
                  state.mymsg = payload;
              },
              updateMessage(state, message) {
                state.message = message;
              }
          }
      },
      moduleB: {
          namespaced: true,
          state: {
              count: 0,
          },
          mutations: {
              increment(state) {
                  state.count++
              },
          }
      }
  }
})
export default store

app.vue
copmonent에서 helloworld를 불러
<template>
  <div id="app">
      Page app:
    <form>
        <input  v-model="compTitleVuex" >
        <input  v-model="compTitleVuex" >
        <HelloWorld/>
    </form>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  computed: {
    compTitleVuex: {
      get() {
        return this.$store.state.moduleA.mymsg
      },
      set(value) {
        console.log(value);
        this.$store.commit('moduleA/setMsg', value)
      }
    }
  }
}
</script>

호출되는 component 측
HelloWorld.vue 끔찍한 이름 · ·
<template>
    <div class="hello">
        <hr>
        Inside component
        <input v-model="compTitleVuex">
    </div>
</template>

<script>

    export default {
        name: 'insideComponent',
        computed: {
            compTitleVuex: {
                get() {
                    return this.$store.state.moduleA.mymsg
                },
                set(value) {
                    console.log(value);
                    this.$store.commit('moduleA/setMsg', value)
                }
            }
        }
    }
</script>



이하 mapState는 움직이지 않았다



쓰는 방법 다른가, 대응하고 있지 않는가.
export default {
  name: 'HelloWorld',
  computed: {
    // mix this into the outer object with the object spread operator
    ...mapState({
      message: state => state.moduleA.message;
  })
}}

좋은 웹페이지 즐겨찾기