vuexでcomponentなform、親子相互bind

13711 ワード
Vue.js Vuex Vue.js テキストリンク

git
https://github.com/kujiy/vuex-study/tree/a2049726e7e6a2c62c1a1ba1d0cef7940473c6b9

やりたいこと

親子相互に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;
  })
}}