<commit_before>---
rid: 1566444
bid: nuxt
rcd: vuex
srcpath: nuxt/vuex.adoc
title: Vuex メモ
category: Nuxt.js
date: 2019.8.22
layout: refill.jade
---

== Nuxt.js module mode store template

- link:https://ja.nuxtjs.org/guide/vuex-store/[Vuex ストア - Nuxt.js]
- #link:https://vuex.vuejs.org/ja/api/[API リファレンス | Vuex]#

.store/user.js
```js
import axios from 'axios'

export const state = () => ({
  profile: null
})

export const getters = {
  isLogin(state) {
    return !!state.profile
  }
}

export const mutations = {
  setProfile(state, profile) {
    state.profile = profile
  }
}

export const actions = {
  async load({ commit }, id) {
    const res = await axios.get(API_URL, { params: { id } })
    const profile = res.data
    commit('setProfile', profile)
  }
}
```

.pages/_id.vue
```js
import { mapState, mapGetters } from 'vuex'

export default {
  computed: {
    ...mapState('user', {
      profile: state => state.profile
    }),
    ...mapGetters({
      isLogin: 'user/isLogin'
    })
  },
  async asyncData({ store, params }) {
    const { id } = params
    await store.dispatch('user/load', id)
    return { id }
  },
  async mounted() {
    // await this.$store.dispatch('user/load', this.id)
  }
}
```

== TIPS・getters

- https://vuex.vuejs.org/ja/guide/getters.html

> メソッドによってアクセスされるゲッターは呼び出す度に実行され、その結果はキャッシュされない点に留意してください。

```js
export const getters = {
  // メソッドスタイルアクセス
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
  // ゲッターは第2引数として他のゲッターを受け取ります:
  doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  }
}
```

== TIPS・actions

```js
{
  state,      // `store.state` と同じか、モジュール内にあればローカルステート
  rootState,  // `store.state` と同じ。ただしモジュール内に限る
  commit,     // `store.commit` と同じ
  dispatch,   // `store.dispatch` と同じ
  getters,    // `store.getters` と同じか、モジュール内にあればローカルゲッター
  rootGetters // `store.getters` と同じ。ただしモジュール内に限る
}
```<commit_msg>:memo: vuex<commit_after>---
rid: 1566444
bid: nuxt
rcd: vuex
srcpath: nuxt/vuex.adoc
title: Vuex メモ
category: Nuxt.js
date: 2019.8.22
layout: refill.jade
---

== Nuxt.js module mode store template

- link:https://ja.nuxtjs.org/guide/vuex-store/[Vuex ストア - Nuxt.js]
- #link:https://vuex.vuejs.org/ja/api/[API リファレンス | Vuex]#

.store/user.js
```js
import axios from 'axios'

export const state = () => ({
  profile: null
})

export const getters = {
  isLogin(state) {
    return !!state.profile
  }
}

export const mutations = {
  setProfile(state, profile) {
    state.profile = profile
  }
}

export const actions = {
  async load({ commit }, id) {
    const res = await axios.get(API_URL, { params: { id } })
    const profile = res.data
    commit('setProfile', profile)
  }
}
```

.pages/_id.vue
```js
import { mapState, mapGetters } from 'vuex'

export default {
  computed: {
    ...mapState('user', {
      profile: state => state.profile
    }),
    ...mapGetters({
      isLogin: 'user/isLogin'
    })
  },
  async asyncData({ store, params }) {
    const { id } = params
    await store.dispatch('user/load', id)
    return { id }
  },
  async mounted() {
    // await this.$store.dispatch('user/load', this.id)
  }
}
```

== TIPS・getters

- https://vuex.vuejs.org/ja/guide/getters.html
- https://vuex.vuejs.org/ja/api/#getters

> メソッドによってアクセスされるゲッターは呼び出す度に実行され、その結果はキャッシュされない点に留意してください。

```js
export const getters = {
  // メソッドスタイルアクセス
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  },
  // ゲッターは第2引数として他のゲッターを受け取ります:
  doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  },
  // ローカル、グローバル利用
  getSomething(state, getters, rootState, rootGetters) {
    return rootGetters['user/statistics'](state)
  }
}
```

== TIPS・actions

```js
{
  state,      // `store.state` と同じか、モジュール内にあればローカルステート
  rootState,  // `store.state` と同じ。ただしモジュール内に限る
  commit,     // `store.commit` と同じ
  dispatch,   // `store.dispatch` と同じ
  getters,    // `store.getters` と同じか、モジュール内にあればローカルゲッター
  rootGetters // `store.getters` と同じ。ただしモジュール内に限る
}
```
{'fraction_non_alphanumeric': 0.16464471403812825, 'fraction_numerical': 0.007427581084426839, 'mean_word_length': 3.093211752786221, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 17, 'https://': 7, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2330691', 'n_tokens_mistral': 1838, 'n_tokens_neox': 1769, 'n_words': 301}