Skip to content

Instantly share code, notes, and snippets.

@potato4d

potato4d/Vuexで愚直に実装した例

Created December 24, 2017 03:29
Show Gist options
  • Save potato4d/79ee6b91cea4c59f42b8cc248cc3d4c3 to your computer and use it in GitHub Desktop.
Save potato4d/79ee6b91cea4c59f42b8cc248cc3d4c3 to your computer and use it in GitHub Desktop.
Download ZIP
実例からみるVuexアプリケーションにおけるv-model/computedとの付き合い方 ref: https://qiita.com/potato4d/items/f4b90a907c955e6679df
Raw
file0.html
<body>
<div id="app">
<p>Component:</p>
<input type="text" v-model="$store.state.foo">
<p>Store:</p>
<pre v-html="rawState" />
</div>
<script>
const store = new Vuex.Store({
state: {
foo: 'initial state'
}
})
new Vue({
el: '#app',
store,
computed: {
rawState () {
return JSON.stringify(this.$store.state, '\t')
}
}
})
</script>
</body>
Raw
file1.html
<body>
<div id="app">
<p>Component:</p>
<input type="text" v-model="foo">
<p>Local</p>
<span>{{foo}}</span>
<p>Store:</p>
<pre v-html="rawState" />
</div>
<script>
const { mapGetters } = Vuex
const store = new Vuex.Store({
state: {
foo: '1'
},
getters: {
foo: state => state.foo
}
})
new Vue({
el: '#app',
store,
computed: {
rawState () {
return JSON.stringify(this.$store.state, '\t')
},
...mapGetters(['foo'])
}
})
</script>
</body>
Raw
Vuexで愚直に実装した例
<div id="app">
<p>Component:</p>
<template v-if="isEdit">
<input type="text" :value="foo" @input="onInput">
<button type="button" @click="toggleEdit">Cancel</button>
</template>
<template v-else>
<span>{{foo}}</span>
<button type="button" @click="toggleEdit">Edit</button>
</template>
<p>Local</p>
<span>{{foo}}</span>
<p>Store:</p>
<pre v-html="rawState" />
</div>
<script>
const { mapGetters, mapActions } = Vuex
const store = new Vuex.Store({
state: {
foo: '1',
isEdit: false
},
getters: {
isEdit: state => state.isEdit,
foo: state => state.foo
},
mutations: {
updateFoo (state, { foo }) {
state.foo = foo
},
toggleEdit (state) {
state.isEdit = !state.isEdit
}
},
actions: {
UPDATE_FOO ({ commit }, { foo }) {
commit('updateFoo', { foo })
},
TOGGLE_EDIT ({ commit }) {
commit('toggleEdit')
}
}
})
new Vue({
el: '#app',
store,
methods: {
onInput (event) {
this.doUpdate({ foo: event.target.value })
},
...mapActions({
doUpdate: 'UPDATE_FOO',
toggleEdit: 'TOGGLE_EDIT'
})
},
computed: {
rawState () {
return JSON.stringify(this.$store.state, '\t')
},
...mapGetters(['isEdit', 'foo'])
}
})
</script>
Raw
Vuexのコードをv-modelに置き換えた例
<div id="app">
<p>Component:</p>
<template v-if="isEdit">
<the-edit-form :foo="foo" @done="toggleEdit" />
</template>
<template v-else>
<span>{{foo}}</span>
<button type="button" @click="toggleEdit">Edit</button>
</template>
<p>Store:</p>
<pre v-html="rawState" />
</div>
<script type="text/x-template" id="the-edit-form">
<div>
<input type="text" v-model="newFoo">
<button type="button" @click="doUpdate">Save</button>
<button type="button" @click="doEmitDone">Cancel</button>
</div>
</script>
<script>
const $ = (e) => document.querySelector(e)
const { mapGetters, mapActions } = Vuex
const store = new Vuex.Store({
state: {
foo: '1'
},
getters: {
foo: state => state.foo
},
mutations: {
updateFoo (state, { foo }) {
state.foo = foo
}
},
actions: {
UPDATE_FOO ({ commit }, { foo }) {
commit('updateFoo', { foo })
}
}
})
Vue.component('the-edit-form', {
props: { foo: String },
template: $('#the-edit-form'),
data () {
return { newFoo: null }
},
created () {
this.newFoo = this.foo
},
methods: {
doUpdate () {
this.updateFoo({ foo: this.newFoo })
this.doEmitDone()
},
doEmitDone () {
this.$emit('done')
},
...mapActions({
updateFoo: 'UPDATE_FOO'
})
}
})
new Vue({
el: '#app',
store,
data () {
return {
isEdit: false
}
},
methods: {
toggleEdit () {
this.isEdit = !this.isEdit
}
},
computed: {
rawState () {
return JSON.stringify(this.$store.state, '\t')
},
...mapGetters(['foo'])
}
})
</script>
Raw
Vuexの最終サンプル
<div id="app">
<p>Component:</p>
<template v-if="isEdit">
<input type="text" :value="tmpFoo" @input="onInput">
<button type="button" @click="save">Save</button>
<button type="button" @click="toggleEdit">Cancel</button>
</template>
<template v-else>
<span>{{foo}}</span>
<button type="button" @click="toggleEdit">Edit</button>
</template>
<p>Local</p>
<span>{{foo}}</span>
<p>Store:</p>
<pre v-html="rawState" />
</div>
<script>
const { mapGetters, mapActions } = Vuex
const store = new Vuex.Store({
state: {
foo: '1',
tmpFoo: '',
isEdit: false
},
getters: {
isEdit: state => state.isEdit,
tmpFoo: state => state.tmpFoo,
foo: state => state.foo
},
mutations: {
updateFoo (state, { foo }) {
state.foo = foo
},
updateTmpFoo (state, { foo }) {
state.tmpFoo = foo
},
toggleEdit (state) {
state.isEdit = !state.isEdit
}
},
actions: {
UPDATE_FOO ({ commit }, { foo }) {
commit('updateFoo', { foo })
commit('updateTmpFoo', { foo })
},
UPDATE_TMP_FOO ({ commit }, { foo }) {
commit('updateTmpFoo', { foo })
},
TOGGLE_EDIT ({ commit }) {
commit('toggleEdit')
}
}
})
new Vue({
el: '#app',
store,
methods: {
onInput (event) {
this.doSaveTmp({ foo: event.target.value })
},
save () {
this.doUpdate({ foo: this.tmpFoo })
this.toggleEdit()
},
...mapActions({
doUpdate: 'UPDATE_FOO',
doSaveTmp: 'UPDATE_TMP_FOO',
toggleEdit: 'TOGGLE_EDIT'
})
},
computed: {
rawState () {
return JSON.stringify(this.$store.state, '\t')
},
...mapGetters(['isEdit', 'foo', 'tmpFoo'])
}
})
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment