Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

vuexでcomponentなform、親子相互bind

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

やりたいこと

親子相互にbindしたい。

どのinput boxに入れても全部リアクティブに動く状態。

image.png

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;
  })
}}
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away