Vuex stateを作成して各コンポーネントで参照する
Vue.jsにVuexを導入するでVuexの導入が完了しました。
実際にstoreを作成して、各コンポーネントでその値を参照できるようにします。
storeの作成
最初にstoreを作成します。
mutations.jsにstateのオブジェクトを定義します。stateがアプリケーション全体の状態を管理します。
mutations.jsexport 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の値を変更する方法を紹介します。