[Nuxt][Vuex] data, props, mutated, computed, getters、、、などのデータオプション一覧

2019年5月29日ITnuxt, vue, vuex

Vue & Nuxt & Vuex で開発していると、data, props, mutated, computed, gettersなど似たような名前の変数宣言、アクセサ、メソッドがよく出てきます。

それぞれがなんなのかごちゃごちゃしてきたので、以下ざっとまとめてみました。

Vue

公式ドキュメント:
https://jp.vuejs.org/v2/api/#data

data: 変数、データの入れ物

props: 親コンポーネントからデータを受け取る時に使う

computed: Vueインスタンス生成時に実行され、値として使われる

methods: メソッド

以下の例ではPostListコンポーネントからPostコンポーネントを表示させています。

例:
PostList.vue



Post.vue



Vuex

アプリケーション全体の状態を管理する。(コンポーネント単位ではなく)

リロードすると、削除されてしまうので、リロードしても状態を維持したい時は、LocalStorageやCookieに保存する

公式ドキュメント:
https://vuex.vuejs.org/ja/

state: 管理したいデータの入れ物、変数

mutations: 状態を変更させたい時に使う。同期処理。

actions: メソッド。ここからmutationsをコミット。非同期処理はここで書いて、成功時にstateを更新する処理を書くのがよさげ

getters: ストアの情報を取得したい時に使う。(setterはなく、actions, mutationsを使う)

例:
index.js(クラシックモード)

import Vuex from 'vuex'
import axios from 'axios'

const store = () => {
  return new Vuex.Store({
    state: {
      Posts: []
    },
    mutations: {
      setPosts(state, posts) {
        state.Posts = posts
      },
      addPost(state, post) {
        state.Posts.push(post)
      },
      editPost(state, editedPost) {
        const postIndex = state.loadedPosts.findIndex(post => post.id === editedPost.id)
        state.loadedPosts[postIndex] = editedPost
      }
    },
    actions: {
      nuxtServerInit(vuexContext, context) {
        return axios.get(URL)
          .then(res => {
            const postsArray = []
            for (const key in res.data) {
              postsArray.push({ ...res.data[key], id: key })
            }
            vuexContext.commit('setPosts', postsArray)
          })
          .catch(e => context.error(e))
      },
      addPost(vuexContext, post) {
        const createdPost = {
          ...post,
          updatedDate: new Date()
        }
        return axios
        .post(URL, createdPost )
        .then(result => {
          vuexContext.commit('addPost', { ...createdPost, id: result.data.name })
        })
        .catch(e => console.log(e))
      },
      editPost(vuexContext, editedPost) {
        return axios.put(URL + editedPost.id + '.json', editedPost)
        .then(res => {
          vuexContext.commit('editPost', editedPost)
        })
        .catch(e => console.log(e))
      },
      setPosts(vuexContext, posts) {
        vuexContext.commit('setPosts', posts)
      }
    },
    getters: {
      Posts(state) {
        return state.Posts
      }
    }
  })
}

export default store

以上になります。

スポンサーリンク

Posted by nobuhiro harada