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
})

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
　}
]