Vuex stateを作成して各コンポーネントで参照する
Vue.jsにVuexを導入するでVuex
の導入が完了しました。
実際にstore
を作成して、各コンポーネントでその値を参照できるようにします。
storeの作成
最初にstore
を作成します。
mutations.js
にstate
のオブジェクトを定義します。state
がアプリケーション全体の状態を管理します。
mutations.js
export const state = {
message: 'hello vuex'
};
コンポーネントで参照する
各コンポーネントではthis.$store
でVuex
の情報が取得できます。
以下のようにApp.vue
を変更してビルドすると、hello vuex
と表示されます。
App.vue
<template>
<div class="message">
{{ message }}
</div>
</template>
<style lang="less" scoped>
@import "~less/variables";
.message {
color: @red;
}
</style>
<script>
export default {
computed: {
message: 'hello world'
message () {
return this.$store.state.message;
}
}
};
</script>
mapStateヘルパー
this.$store.state.message
と書くのは少し長くて面倒なので、ヘルパー関数が用意されています。
App.vue
のスクリプトの部分を以下のように書き換えます。
App.vue
<script>
import { mapState } from 'vuex';
export default {
computed: {
message () {
return this.$store.state.message;
}
...mapState({
message: 'message'
})
}
};
</script>
'message'
というように文字列を渡すと内部的にはstate.message
と同じ扱いになります。
mapStateの箇所でエラーになってしまう場合
...
はVue.js
やVuex
で用意された機能ではなく、オブジェクトスプレッド演算子という新しいJavaScript
の記法です。
オブジェクトスプレッド演算子はstage-3
なので、babel-preset-stage-3
のパッケージをインストールし、babelrc
に以下のように追記する必要があります。(babel-preset-stage-3
の代わりにbabel-preset-stage-2
やbabel-preset-stage-0
でもOKです)
$ npm install --save-dev babel-preset-stage-3
.babelrc
{
"presets": [["es2015", {"modules": false}], "stage-3"]
}
Vuex mutationでstateの値を変更するでstate
の値を変更する方法を紹介します。