15.vue.jsのvuexでカウンター:index.html
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン | ||
15.vue.jsのvuexでカウンター:index.html [2019/01/26] – [mapGetters, mapActionsを用いてVuexのコードを少し発展させる] adash333 | 15.vue.jsのvuexでカウンター:index.html [2019/02/23] (現在) – [15.Vue.jsのvuexでカウンター] adash333 | ||
---|---|---|---|
行 1: | 行 1: | ||
====== 15.Vue.jsのvuexでカウンター ====== | ====== 15.Vue.jsのvuexでカウンター ====== | ||
- | vuexをなんとかして理解するために簡単なアプリを写経しています。前回の[[14.vue.jsのvuexで入力フォーム: | + | vuexをなんとかして理解するために簡単なアプリを写経しています。前回の<wrap hi>[[14.vue.jsのvuexで入力フォーム: |
今回は、『カウンターアプリ』を作成しながら、vuexの理解を深めたいと思います。 | 今回は、『カウンターアプリ』を作成しながら、vuexの理解を深めたいと思います。 | ||
行 25: | 行 25: | ||
ソースコード | ソースコード | ||
+ | https:// | ||
https:// | https:// | ||
Demo | Demo | ||
+ | https:// | ||
+ | {{: | ||
===== 開発環境 ===== | ===== 開発環境 ===== | ||
行 299: | 行 301: | ||
{{: | {{: | ||
- | このように、カウンターの初期値や、+1、-1の状態管理をvuexに移動しても、ちゃんと、カウンターが動くことが確認できる。 | + | カウンターの初期値や、+1、-1の状態管理をvuexに移動しても、ちゃんと、カウンターが動くことが確認できました。 |
{{: | {{: | ||
+ | |||
+ | ここまでのソースコード(CodeSandeboxバージョン) | ||
+ | |||
+ | {{ : | ||
===== mapGetters, mapActionsを用いてVuexのコードを少し発展させる ===== | ===== mapGetters, mapActionsを用いてVuexのコードを少し発展させる ===== | ||
行 347: | 行 353: | ||
上記のカウンターアプリを、mapGetters, | 上記のカウンターアプリを、mapGetters, | ||
+ | < | ||
+ | import { | ||
+ | mapGetters, | ||
+ | mapActions | ||
+ | } from ' | ||
+ | |||
+ | export default { | ||
+ | name: ' | ||
+ | computed: { | ||
+ | count () { | ||
+ | return this.$store.getters.getCount | ||
+ | } | ||
+ | }, | ||
+ | methods: { | ||
+ | ...mapActions([ | ||
+ | ' | ||
+ | ' | ||
+ | ]) | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | (変更前) | ||
+ | {{: | ||
+ | |||
+ | (変更後) | ||
+ | {{: | ||
- | 作成中 | + | 今回のアプリ作成はここまでとなります。 |
行 382: | 行 415: | ||
DEMO | DEMO | ||
+ | https:// | ||
15.vue.jsのvuexでカウンター/index.html.1548501064.txt.gz · 最終更新: 2019/01/26 by adash333