vue.jsのvuex(データ保存)でカウンター機能を実装する。
1, vueプロジェクトを作る(下準備)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
vue create vue_vuex Vue CLI v4.5.6 ? Please pick a preset: Default ([Vue 2] babel, eslint) Default (Vue 3 Preview) ([Vue 3] babel, eslint) > Manually select features Vue CLI v4.5.6 ? Please pick a preset: Manually select features ? Check the features needed for your project: (*) Choose Vue version (*) Babel ( ) TypeScript ( ) Progressive Web App (PWA) Support (*) Router >(*) Vuex ( ) CSS Pre-processors (*) Linter / Formatter ( ) Unit Testing ( ) E2E Testing # あとはエンター連打 # webサーバ機能で、http://localhost:8080/ がブラウザで見れるようになる。 cd vue_vuex yarn serve |
2, vuex(ストア)の設定を行う
src/store/index.jsが、vuexの設定ファイル。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { // 初期値を設定 count: 0 }, mutations: { // 更新処理を記述 plus(state){ state.count++ }, minus(state){ state.count-- }, }, actions: { }, modules: { } }) |
3, ブラウザに、プラスボタン・マイナスボタン・カウンターを表示する。
App.vue
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<template> <div> <input type="button" value="-" v-on:click="minus" /> {{count}} <input type="button" value="+" v-on:click="plus" /> </div> </template> <script> export default { name: 'app', computed: { count() { return this.$store.state.count } }, methods: { minus() { this.$store.commit('minus') }, plus() { this.$store.commit('plus') } } } </script> <style> </style> |
実際には、コンポーネント化して、ログイン情報などを保持するものらしい。