Vuexの基本

Vuex

すべてのコンポーネントでデータを一元管理する仕組み
props, $emitによる管理の難しい場合に(コンポーネントが大量、階層が複雑)に使用する。
どのコンポーネントからでもデータへのアクセスが可能
state, getters, mutations, actionsの4つの機能?から構成される。

state

vue.jsでいうdataプロパティと同じ働き
コンポーネントからアクセスするときは、this.$store.state.messageで表示できる。
記述方法

state: {
    message: 'Hello World'
}

console.log(this.$store.state.message) 
=> 'Hello World'

getters

vue.jsでいうcomputedプロパティと同じ働き
コンポーネントからアクセスするときは、this.$store.getters.messageで表示できる。

記述方法

state: {
    msg: 'Hello World',
    id: [1, 2, 3, 4, 5, 6]
},

getters: {
    message(state) {
        return state.msg
    },
    ary(state) {
        return state.id.filter(item => item > 4)
    } 
}

console.log(this.$store.getters.ary) 
=> [5, 6]

mutations

stateの更新を行う
vueでいうmethodsと同じ働きをする
コンポーネントから実行するときは、this.$store.commit('名前')とする
非同期処理を行ってはならない

記述方法

<template>
    <button :click="count">カウント</button>
    <p>{{ number }}</p>
</template>

<script>
export default {
    computed: {
        number() {
            return this.$store.state.count
        }
    },
    methods: {
        count() {
            this.$store.commit('count')
        }
    }
}
</script>

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    count(state) {
      state.count++
    }
  },
  actions: {
  }
})

actions

stateの更新をmutationsを経由して行う
非同期処理を行える。
コンポーネントから実行するときはthis.$store.dispatch('名前')

記述方法

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    setCount(state) {
      state.count++
    }
  },
  actions: {
    count({commit}) {
        commit('setCount')
    }
  }
})

非同期でデータを取得(npm install axiosが必須です)

actions: {
  getData({commit}){
    return axios.get('https://jsonplaceholder.typicode.com/users')
        .then(response => {
          commit('setData',response.data)
        })
  }
}