mo49
7/2/2019 - 5:53 AM

NuxtStoreSample.md

NuxtStoreSample.md
content_copyfile_download
  • Rendered
  • Source

Nuxt.js における store のミニマムサンプル

store/point.js

export const state = () => ({
  point: null,
})

export const mutations = {
  set(state, point) {
    state.point = point
  },
  clear(state) {
    state.point = null
  }
}

export const actions = {
  setPoint({commit}, point){
    commit('set', point)
  },
  clearPoint({commit}) {
    commit('clear')
  }
}

使ってみる

<template>
  <p>{{ point }}</p>
</template>

<script>
export default {
  computed: {
    point() {
      return this.$store.state.point.point
    }
  },
  mounted() {
    this.$axios.get("/point").then(({ data }) => {
      this.$store.dispatch('point/setPoint', data.point)
    });
  },
};
</script>

参考