Vuex まとめ

投稿者: Auther | 8 ヶ月 前 | 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>

現在未評価

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

新しいコメント

必須

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

オプション

最近の投稿

アーカイブ

2021
2020

タグ

多義語(1) 英語原論(15) 単語 上級(12) コラム(7) mezzanine(1) サブスリー(4) music(11) 海外移住(2) 文化(2) 政治(2) nujabes(3) ランニング(4) 発音(14) django(4) 文法(15) 文法問題(1) 教育論(3) 転職(2) 仕事(1) アニメ(1) cowboy bebap(26) TOEIC(1) 歴史(2) vuejs(7) 経済(1) lesencrypt(1) データサイエンス(1)

著者

Auther (113) admin (2)

フィード

RSS / Atom

Social Links

運営より

当ウェブサイト内のコンテンツ(文章、写真、イラスト、サイト構造など)に関する著作権等は 弊社、または制作者などに帰属しております。営利、非営利を問わず、当ウェブサイトのコンテンツの全て 、または一部を許可なく複製、転用、販売など二次利用することはご遠慮ください。

目覚めよ!英語力