vuexの基本的な使い方導入方法と変数の取得・更新

2022年10月26日 2022年10月26日

いろんな記事を見たが、自分の乏しい理解力ではもっと細かく説明してほしいとおもった

ので、導入方法から使い方までまとめる。

インストール

まずはプロジェクトディレクトリでコマンドを叩いてインストール。

npm install --save vuex

↑これだとエラーが出たり最終的にコンパイルができないことがあった。

そんなときは、

npm uninstall vuex

npm install vuex@3

これでvuexのバージョンを指定して入れなおす。

vue2でもvuex3は使える

参考記事↓

vuex内にメソッド作成

プロジェクトディレクトリ/resources/js/store/index.jsを外部ファイルとして作成

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const store = new Vuex.Store({
    state: {
        message: '元々の内容'
    },
    mutations: {
        update(state,message) {
            state.message = message
        },
    }
}, );
export default store;

インポート

app.jsかmain.jsに外部ファイルをインポート&宣言

//プロジェクトディレクトリ\resources\js\app.js
import store from "./store";

const app = new Vue({
    el: '#app',
    render: h => h(App),
    store,
    router,
    components: {
        App
    },   
});

フロントからvuex内の関数updata()が呼び出されたら、vuex内の変数messageが任意の値に書きかえられるみたいな感じを想定している。

vueから呼び出す

いよいよ呼び出す。

//Hoge.vue
<template>
    <h1>{{ $store.state.message }}</h1>
    <button @click="submit">発動！</button>
</template>
<script>
export default {          
methods: {
    submit() {
            //vuexのupdate関数を呼び出す（第2引数に書き替え後の値を仕込んでいる）
      this.$store.commit("update",'書き換え後のメッセージ');//vuexのupdate関数を呼び出す

            //書き換え後のメッセージを見る↓
      console.log(this.$store.state.message)
    },
}
</script>

{{ $store.state.message }}の内容が、

元々のメッセージ

から

書き換え後のメッセージ

に変わるはず。

vuexで受け取るとき、vueから渡ってくる引数は、第2引数として扱ってあげないといけない

update(state,渡したい値)

ここに注意が必要

Vuexでmutations内の関数に引数を渡したい

ミューテーション | Vuex

余談

いつ使うん？

公式の説明によると、

いつ、Vuexを使うべきでしょうか？#

Vuex は、共有状態の管理に役立ちますが、さらに概念やボイラープレートのコストがかかります。これは、短期的生産性と長期的生産性のトレードオフです。

もし、あなたが大規模な SPA を構築することなく、Vuex を導入した場合、冗長で気が遠くなるように感じるかもしれません。そう感じることは全く普通です。あなたのアプリがシンプルであれば、Vuex なしで問題ないでしょう。単純なストアパターンが必要なだけかもしれません。しかし、今あなたが中規模から大規模の SPA を構築しているなら、Vue コンポーネントの外の状態をもっとうまく扱えないか考えなくてはならない状況にあるかもしれません。その場合 Vuex は次のステップとして最適でしょう。これは Redux の作者、Dan Abramov からの良い引用です:

https://vuex.vuejs.org/ja/#状態管理パターン-とはなんですか？

なるほど、わからん。

例えば、ページを遷移するけど前のページで使っていた情報を覚えてほしい！みたいなときとか。

戻るボタンを押すと、さっきのURLに戻りたい！
だから、移動前のページのURLをあらかじめvuexさんに覚えさせておこう！
みたいな感じ。

他にもいろんな使い方できるけど。