投稿者: Auther | 3 年, 7 ヶ月 前 | 0 のコメント

Vuexは[store]フォルダを使用する

$storeを利用

コンポーネントなどからVuexの変数や処理などを利用するために$storeを利用する

・storeフォルダ 　index.js

import Vuex from 'vuex'

//Vuexの情報をまとめて保管するオブジェクト

const createStore = () => {
  return new Vuex.Store({
    state: function(){
        return {
            message: 'This is store message!',
        };
    },
  })

//stateはコンポーネントでいうdataのようなもの

export default createStore

storeの値を利用する

・index.vue

<template>
  <section class="container">
    <h1>{{title}}</h1>
    <p>{{$store.state.message}}</p>
  </section>
</template>

<script>
export default {
  data: function(){
    return {
      title:'Hello',
    };
  },
};
</script>

store値の変更

storeフォルダ 　index.js

import Vuex from 'vuex'

const createStore = () => {
  return new Vuex.Store({
    state: function(){
        return {
            message: 'count number.',
            counter: 0,　//追加
        };
    },
  })
}

export default createStore

・index.vue

<template>
  <section class="container">
    <h1>{{title}}</h1>
    <p>{{$store.state.message}}</p>
    <hr>
    <div class="link"
        v-on:click="doAction">　　//doAction関数の割り当て
      <a>
        clicked: {{ $store.state.counter }}
      </a>
    </div>
  </section>
</template>

<script>
export default {
  data: function(){
    return {
      title:'Hello',
      message: 'this is message.',
    };
  },
  methods: {
    doAction: function(){
　　//doAction関数の定義
      this.$store.state.counter++;　　
    }
  }
};
</script>

ミューテーションを使う

値変更処理をstore側に用意

storeフォルダ 　index.js

import Vuex from 'vuex'

const createStore = () => {
  return new Vuex.Store({
    state: function(){
        return {
            message: 'count number.',
            counter: 0,
        };
    },
    mutations: {
      count: function(state) {
        state.counter++;
      },
      reset: function(state) {
          state.counter = 0;
      }
    },
  })
}

export default createStore

ミューテーションはコミットして使う

・index.vue

<template>
  <section class="container">
    <h1>{{title}}</h1>
    <p>{{message}}</p>
    <hr>
    <div class="link"
        @click="$store.commit('count')"　　//@=v-on
        @click.ctrl="$store.commit('reset')">   //ctr+click
      <a>
        clicked: {{ $store.state.counter }}
      </a>
    </div>
  </section>
</template>

<script>
export default {
  data: function(){
    return {
      title:'Hello',
      message: 'this is message.',
    };
  },
};
</script>

引数が複数ある場合

mutations

mutations: {
  count: function(state, obj) {
    state.message =obj.message;　//objを用意
    state.counter += obj.add;
  },
  reset: function(state) {
      state.counter = 0;
  }
},

呼び出し側

<div class="link"
    @click.exact="$store.commit({type:'count', message:'add 1!', add:1})"　　//messageと足し算する数
    @click.shift.exact="$store.commit({type:'count', message:'add 5!', add:5})"
    @click.ctrl.exact="$store.commit({type:'count', message:'add 10!', add:10})">
  <a @click.stop="$store.commit('reset')">
    clicked: {{ $store.state.counter }}
  </a>
</div>

アクションの利用

ミューテーション：ステートを利用した処理を実行

アクション：ミューテーションを実行する仕組み

storeフォルダ　index.js

import Vuex from 'vuex'

const createStore = () => {
  return new Vuex.Store({
    state: function(){
        return {
            message: 'count number.',
            counter: 0,
        };
    },
    mutations: {
      count: function(state, n) {
        state.counter += n;
      },
      say: function(state, msg) {
        state.message =msg; 
      },
      reset: function(state) {
          state.counter = 0;
          state.message ='reset now...';
      },
    },
    actions: {
      doit: function(context) {
        var n = Math.floor(Math.random() * 10);　//0-9のランダム値
        context.commit('count', n);
        context.commit('say', 'add ' + n + '!');
      },
    }
  })
}

export default createStore

index.vue

<div class="link"
    @click="$store.dispatch('doit')">  //アクション実行　countとsayを呼び出す
  <a @click.stop="$store.commit('reset')">
    clicked: {{ $store.state.counter }}
  </a>
</div>

リロードしても値を保持　pluginを利用するだけ

npm install vuex-persistedstate

mode:spa

storeフォルダ　index.js

import Vuex from 'vuex'
import createPersistedState from "vuex-persistedstate";

const createStore = () => {
  return new Vuex.Store({
    state: function(){
        return {
            message: 'count number.',
            counter: 0,
        };
    },
    mutations: {
      doit: function(state) {
        var n = Math.floor(Math.random() * 10);
        state.counter += n;
        state.message = 'add ' + n + '.'; 
      },
      reset: function(state) {
        state.counter = 0;
        state.message = "reset now.";
      },
    },
//プラグイン追加
    plugins: [
      createPersistedState(),
    ],
  })
}
export default createStore

index.vue

<template>
  <section class="container">
    <h1>{{title}}</h1>
    <p>{{$store.state.message}}</p>
    <hr>
    <div class="link"
        @click="$store.commit('doit')">
      <a @click.stop="$store.commit('reset')">
        clicked: {{ $store.state.counter }}
      </a>
    </div>
  </section>
</template>

• タグ:
• vuejs

現在コメントはありません

新しいコメント

お名前

必須

メールアドレス

記入が必要です(公開はされません)

ウェブサイト

オプション

コメント

このフィールドに入力するとコメントはスパム扱いされます