Vuex

[yuyuyuriko78]

Vuex

• 固い言い方をすると「Vueのバージョン管理システム」
• ざっくり言うと「データを貯めておける箱を作ることができるシステム」
• 注意：小規模のPJでの使用は推奨されない

  ---

• すべてのコンポーネントから使用・更新することができる
• 入れ子になっているコンポーネントからでも！ → 親子でのデータバケツリレーが不要になる

[yuyuyuriko78]

環境構築

• npm install vuex --save

[yuyuyuriko78]

準備

src > store > index.js　または　src > store.js

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

main.js

import Vue from 'vue'
import App from './App.vue'
import store from './srore'

new Vue({
  store,
  render: h => h(App),
}).mount('#app')

[yuyuyuriko78]

index.js(store.js)の基本構造

import Vue from 'vue';
import Vuex from 'vuex';
import データ from 'フォルダ';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {},
  getters: {},
  mutations: {},
  actions: {},
});

state

• データそのもの
• ここに書いたデータを、あらゆるコンポーネントで使えるようになる

  getters

• stateに保存されているデータをコンポーネントに渡すメソッド
• stateに保存されているデータをいじってからコンポーネントに渡すこともできる

  mutations

• stateのデータを変更できる、唯一の存在
• データがコミットされると呼ばれる

  actions

• APIと非同期通信を行い、データを取得する
• データを取得したらデータをコミットし、mutationを呼び出す

名前	役割	補足
state	データそのもの	aa
getters	stateのデータをVueコンポーネントに渡す	aaa
mutations	stateのデータを変更することができる唯一の存在	コミットにより呼び出す
actions	APIと非同期通信を行い取得したデータをコミットする	mutationsを呼び出す

まとめ

• actionが実行される
• mutationが呼ばれる
• stateがmutartionによって書きかえられる
• gettersでstateのデータの中身をコンポーネントに返す

[yuyuyuriko78]

例　本棚アプリ

• stateの中身（情報）を、別のJSファイルに分けている store.js

  
  import Vue from 'vue';
  import Vuex from 'vuex';
  import books from './books';

Vue.use(Vuex);

const store = new Vuex.Store({ state: { books, }, getters: { getNewBookId(state) { return state.books.length + 1; }, findBookById: (state) => (id) => { return state.books.find((book) => book.id === id); }, }, mutations: { saveNewBook: function(state, book){ state.books.push(book); }, updateBook: function(state, { oldBook, newBook }){ Object.assign(oldBook, newBook); }, }, actions: { addBook: function({ commit, getters}, book){ commit('saveNewBook', { id: getters.getNewBookId, ...book, }); }, updateBook: function({ commit, getters }, {id, book} ){ const oldBook = getters.findBookById(id); if(oldBook) { commit('updateBook', {oldBook, newBook: book}); } } }, });

export default store;

book.js
```js
const books = [
  {
    id: 1,
    title: 'JS Book',
    author: 'Suzuki',
    image: require('@/assets/web.png'),
    isFavorite: true,
  },
  {
    id: 2,
    title: 'PHP Book',
    author: 'Tanaka',
    image: require('@/assets/programming.png'),
    isFavorite: false,
  },
];

export default books;

[yuyuyuriko78]

①dispatch → actions

this.$store.dispatch('アクション名', 渡すデータ)

• 渡すデータは１つの変数にまとめる

NewBook.vue（コンポーネント）

<script>
import BookForm from '@/components/BookForm';
export default {
  name: 'NewBook',
  components: { BookForm },
  methods: {
    onSubmit(book) {
      this.$store.dispatch('addBook', book);
      this.$router.push('/');
    },
  },
};
</script>

store.js

actions: {
    addBook: function({ commit, getters }, book){
      commit('saveNewBook', {
        id: getters.getNewBookId,
        ...book,
      });
    },
  },

• 第１引数：contextオブジェクト
  • state, rootState, commit, dispatch, getters, rootGettersのいずれか。参考 参考2
  • {} で囲う記法が使用できる
• 第２引数：普通の引数
• commitは関数を発火することができる
  • commit('呼び出す関数名', その関数に渡すデータ)

[yuyuyuriko78]

②actions → mutations

store.js

mutations: {
    saveNewBook: function(state, book){
      state.books.push(book);
    },
  },

• actionsによって起動する。同時に本に関するデータが渡される
• ここでは、stateのbooksに、新しい本が追加されている

[yuyuyuriko78]

storeの利用 (getters)

getterを利用しない

Top.vue（コンポーネント）

computed: {
    books() {
      return this.$store.state.books;
    }
}

getterを利用する

store.js

getters: {
  todos(state) {
    return state.books.author
  }
}

Sample.vue（コンポーネント）

computed: {
  todos() {
    this.$store.getters.todos
  }
}

---

store.js

getters: {
   squared: function(state) {
      return state.count * state.count
    },
}

Sample2.js

computed: {
  square() {
      this.$store.getters.squared
  }
}