Import { mapState } from 'vuex' と書くのが面倒


#1

Nuxt

import { mapState, mapGetters } from 'vuex'

とか一々書くの面倒なので以下を参考に、

ProvidePlugin / webpack

nuxt.config.js を以下のように設定、

nuxt.config.js

const webpack = require('webpack');

module.exports = {
  ...
  build: {
    ...
    plugins: [
      new webpack.ProvidePlugin({
        'mapState':     ['vuex', 'mapState'],
        'mapGetters': 	['vuex', 'mapGetters'],
        'mapMutations': ['vuex', 'mapMutations'],
        'mapActions': 	['vuex', 'mapActions'],
      })
    ]
  }
}

store 内を以下のように書いてみました。

store/bs.js

export const state = () => ({
  size: 3,
  users: []
})

export const getters = {
  bs (state) {
    return [...new Array(state.size)].map((b, i) => `b${i}`)
  }
}

export const mutations = {
  resize (state) {
    state.size = Math.floor(Math.random() * 10);
  },
  set_users (state, users) {
    state.users = users.slice(0, state.size);
  }
}

export const actions = {
  async get_users ({ commit }) {
    const url = 'https://jsonplaceholder.typicode.com/users';
    const users = await this.$axios.$get(url);

    commit('set_users', users);
  }
}

そして以下のように使ったところ、

pages/index.vue

<template lang="html">
  <div class="">
    <h1>
      Size: {{ size }}
      <button type="button" @click="update">
        Resize
      </button>
    </h1>

    <section>
      <h2>bs</h2>
      <ul>
        <li v-for="b in bs" :key="b">
          {{ b }}
        </li>
      </ul>
    </section>

    <section>
      <h2>Users</h2>
      <ol>
        <li v-for="user in users" :key="user.id">
          {{ user.name }}
        </li>
      </ol>
    </section>

  </div>
</template>

<script>
  export default {
    computed: {
      ...mapState('bs', [
        'size',
        'users'
      ]),
      ...mapGetters('bs', [
        'bs',
      ])
    },
    methods: {
      ...mapMutations('bs', [
        'resize',
      ]),
      ...mapActions('bs', [
        'get_users'
      ]),
      update () {
        this.resize();
        this.get_users();
      }
    }
  }
</script>

取り敢えず動いているようです。

20190205T091401

何か間違った点がありましたら教えてください。


#2

syntax highlightingつけれますか?あったほうがコード読みやすいです(⌒-⌒; )


#3

こんな感じかな。

この forum 使い始めの頃に書いたものだから、

```javascript
```

を使えるとは思ってなかったんですよね。