Vue Vuex

store

属性 機能 備考
state 状態(維持させたい値)
getter ステートを加工&取得するメソッド
mutation ステートを変更するメソッド
action 非同期処理を伴う処理メソッド

 

mutation

※store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
 strict: true,
 state: {
  count: 0
 },
 getters: {},
 mutations: {
  minus(state){
   state.count--
  },
  plus(state){
   state.count++
  }
 },
 actions: {},
 modules: {}
}

html部
<input type="button" value="-" v-on:click="minus" />
{{count}}
<input type="button" value="+" v-on:click="plus" />

JavaScript部
computed: {
 count () {
  storeにおけるstateのcountプロパティを取得
  return this.$store.state.count
 }
},
methods: {
 minus() {
  storeにおけるmutationsのminusメソッドをcall
  this.$store.commit('minus')
 },
 plus() {
  storeにおけるmutationsのplusメソッドをcall
  this.$store.commit('plus')
 }
}

getter

※store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
 strict: true,
 state: {
  count: 0
 },
 getters: {
  getCount(state) {
   return state.count
  },
  isZero(state) {
   return state.count == 0
  },
 },
 mutations: {},,
 actions: {},
 modules: {}
}

html部
<input type="button" value="-" v-on:click="minus" />
{{getCount}}
<input type="button" value="+" v-on:click="plus" />

JavaScript部
computed: {
 getCount() {
  gettersにおけるのgetCountメソッドを実行
  return this.$store.getters.getCount
 },
 isZero() {
  gettersにおけるのisZeroメソッドを実行
  return this.$store.getters.isZero
 }
},
methods: {
 isBigger(count) {
  storeにないメソッドを登録する事も可能
  return this.$store.getters.getCount > count
 }
},

mapヘルパーメソッド

mapState

ステートを短く記述する

computed: {
 count () {
  return this.$store.state.count
 }
}

import { mapState } from "vuex";
computed: mapState({
 count: state => state.count
})

mapState
mapGetters
mapMutations
mapActions

永続化

インストール

npm install vuex-persistedstate

永続化設定ファイル

※〜plugins/vuex-persistedstate.js
import createPersistedState from 'vuex-persistedstate'

export default ({ store }) => {
 window.onNuxtReady(() => {
  vuex(store)で管理しているデータをWebStorageに保存
  createPersistedState({
   SessionStorageのkeyを設定
   key: 'test-key',
   特定のstoreのみ永続化する場合
   paths: [
    "message"
   ],
   SessionStorageに変更(デフォルトはLocalStorage)
   storage: window.sessionStorage
  })(store);
 });
};

永続化設定ファイル読込設定

※nuxt.config.js
plugins: [
 {
  scr: '~/plugins/vuex-persistedstate.js',
  ssr: false
 }
]

前の記事

Vue VeeValidateプラグイン

次の記事

Vue Nuxt.js