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のコードを少し発展させる ===== | ||
行 346: | 行 352: | ||
上記のカウンターアプリを、mapGetters, | 上記のカウンターアプリを、mapGetters, | ||
- | |||
< | < | ||
行 353: | 行 358: | ||
mapActions | mapActions | ||
} from ' | } from ' | ||
- | |||
export default { | export default { | ||
行 371: | 行 375: | ||
</ | </ | ||
+ | (変更前) | ||
+ | {{: | ||
+ | |||
+ | (変更後) | ||
+ | {{: | ||
+ | 今回のアプリ作成はここまでとなります。 | ||
行 405: | 行 415: | ||
DEMO | DEMO | ||
+ | https:// | ||
15.vue.jsのvuexでカウンター/index.html.1548501252.txt.gz · 最終更新: 2019/01/26 by adash333