vuex로 component form, 부모와 자식 상호 bind
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;
})
}}
Reference
이 문제에 관하여(vuex로 component form, 부모와 자식 상호 bind), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/uturned0/items/5fe5d3328ec1f86baceb
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
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')
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
<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>
<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>
export default {
name: 'HelloWorld',
computed: {
// mix this into the outer object with the object spread operator
...mapState({
message: state => state.moduleA.message;
})
}}
Reference
이 문제에 관하여(vuex로 component form, 부모와 자식 상호 bind), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/uturned0/items/5fe5d3328ec1f86baceb텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)