{"id":479,"date":"2020-05-25T18:07:56","date_gmt":"2020-05-25T09:07:56","guid":{"rendered":"http:\/\/snow-cat.net\/?p=479"},"modified":"2020-05-28T04:05:03","modified_gmt":"2020-05-27T19:05:03","slug":"vuex%e3%81%a7%e6%9c%80%e5%88%9d%e3%81%ab%e6%8a%bc%e3%81%95%e3%81%88%e3%81%a6%e3%81%8a%e3%81%8f%e3%83%9d%e3%82%a4%e3%83%b3%e3%83%88","status":"publish","type":"post","link":"http:\/\/snow-cat.net\/?p=479","title":{"rendered":"vuex\u3067\u6700\u521d\u306b\u62bc\u3055\u3048\u3066\u304a\u304f\u30dd\u30a4\u30f3\u30c8"},"content":{"rendered":"

\u6700\u8fd1nuxt.js\u3092\u89e6\u3063\u3066\u3044\u3066vuex\u306b\u3064\u3044\u3066\u7406\u89e3\u3059\u308b\u307e\u3067\u3061\u3087\u3063\u3068\u6642\u9593\u304c\u304b\u304b\u3063\u305f\u306e\u3067\u3001\u30dd\u30a4\u30f3\u30c8\u3092\u6574\u7406\u3057\u3066\u304a\u3053\u3046\u304b\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n

nuxt.js\u3067\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u4f5c\u3063\u305f\u5834\u5408\u3001store\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u304c\u3042\u308b\u306e\u3067\u3001\u305d\u306e\u4e0b\u306bindex.js\u3092\u4f5c\u3063\u3066\u305d\u3053\u306b\u8a18\u8ff0\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n

\u4eca\u56de\u53c2\u8003\u306b\u3057\u305f\u30b5\u30a4\u30c8\u306f\u3053\u3061\u3089<\/a><\/p>\n

\u30b3\u30fc\u30c9\u306f\u3053\u3093\u306a\u611f\u3058\u3067\u3059\u3002<\/p>\n

import _ from 'lodash'\r\n\r\n\/\/ \u72b6\u614b\u306e\u4fdd\u5b58\u3092\u3057\u3066\u304a\u304f\u6a5f\u80fd\r\nexport const state = () => ({\r\n  todos: []\r\n})\r\n\r\n\/\/ state\u304b\u3089\u72b6\u614b\u3092\u53d6\u5f97\u3059\u308b\u51e6\u7406\r\nexport const getters = {\r\n  todos_all: state => state.todos,\r\n  todos: state => state.todos.filter(todo => todo.status === 'todo')\r\n}\r\n\r\n\/\/ state\u3092\u5909\u66f4\u3059\u308b\u5909\u66f4\r\n\/\/ \u540c\u671f\u7684\u306b\u5909\u66f4\u3059\u308b\r\nexport const mutations = {\r\n  addTodo(state, newTodo) {\r\n    state.todos.push(newTodo)\r\n  },\r\n}\r\n\r\n\/\/ \u30d3\u30e5\u30fc\u304b\u3089\u306eevent\u306b\u53cd\u5fdc\u3057\u3066mutations\u3092\u767a\u884c\u3059\u308b\u51e6\u7406\r\n\/\/ API\u3068\u306e\u975e\u540c\u671f\u51e6\u7406\u3082\u3053\u3053\u3067\u884c\u3046\r\nexport const actions = {\r\n  async fetchTodos({ commit }) {\r\n    await this.$axios.$get('\/todos').then(res => {\r\n      let todos = []\r\n      if (_.has(res, 'documents')) {\r\n        todos = res.documents.map(doc => {\r\n          return {\r\n            id: _.last(doc.name.split('\/')),\r\n            title: doc.fields.title.stringValue,\r\n            status: doc.fields.status.stringValue\r\n          }\r\n        })\r\n      }\r\n      commit('updateTodos', todos)\r\n    })\r\n  },\r\n  async addTodo({ commit }, payload) {\r\n    const req = {\r\n      fields: {\r\n        title: {\r\n          stringValue: payload.title\r\n        },\r\n        status: {\r\n          stringValue: 'todo'\r\n        }\r\n      }\r\n    }\r\n    commit('addTodo', newTodo)\r\n  }\r\n}<\/pre>\n
\u3061\u306a\u307f\u306b\u3001\u4e0a\u8a18\u306e\u65b9\u6cd5\u306f\u30e2\u30b8\u30e5\u30fc\u30eb\u30e2\u30fc\u30c9\u3067\u3001\u30af\u30e9\u30b7\u30c3\u30af\u30e2\u30fc\u30c9\u3068\u3044\u3046\u4ee5\u4e0b\u306e\u66f8\u304d\u65b9\u3082\u3042\u308a\u307e\u3059\u3002<\/p>\n
const store = new Vuex.Store({\r\n  state: {},\r\n  getters:{},\r\n  mutations: {},\r\n  actions:{}\r\n})<\/pre>\n
 <\/p>\n
vuex\u3067\u899a\u3048\u308b\u3079\u304d\u3053\u3068<\/h2>\n
vuex\u3092\u4f7f\u7528\u3059\u308b\u4e0a\u3067\u6700\u521d\u306b\u899a\u3048\u308b\u3079\u304d\u3053\u3068\u306fstate\u3001getters\u3001mutations\u3001actions\u3001module\u306e5\u3064\u3067\u3059\u3002<\/p>\n
state<\/h3>\n
\u753b\u9762\u306b\u8868\u793a\u3059\u308b\u30c7\u30fc\u30bf\u3092\u4fdd\u5b58\u3057\u3066\u304a\u304f\u6a5f\u80fd\u3067\u3059\u3002<\/p>\n
getters<\/h3>\n
state\u306b\u683c\u7d0d\u3055\u308c\u3066\u3044\u308b\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3059\u308b\u6a5f\u80fd\u3067\u3059\u3002<\/p>\n
\u4e00\u89a7\u3084\u8a73\u7d30\u30da\u30fc\u30b8\u3067\u30c7\u30fc\u30bf\u3092\u8868\u793a\u3059\u308b\u969b\u306b\u547c\u3073\u51fa\u3055\u308c\u307e\u3059\u3002<\/p>\n
mutations<\/h3>\n
state\u3092\u66f4\u65b0\u3059\u308b\u30e2\u30b8\u30e5\u30fc\u30eb\u306e\u3088\u3046\u306a\u6a5f\u80fd\u3067\u3059\u3002<\/p>\n
\u57fa\u672c\u7684\u306b\u753b\u9762\u64cd\u4f5c\u3067\u306f\u547c\u3073\u51fa\u3055\u308c\u305a\u3001\u4e0b\u306eactions\u304b\u3089\u547c\u3073\u51fa\u3057\u307e\u3059\u3002<\/p>\n
\u3061\u306a\u307f\u306bmutations\u3092\u547c\u3073\u51fa\u3059\u5834\u5408\u306fcommit(mutation\u540d)\u3068\u3044\u3046\u5f62\u5f0f\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n
actions<\/h3>\n
\u753b\u9762\u64cd\u4f5c\u3067\u547c\u3073\u51fa\u3055\u308c\u3066API\u3068\u975e\u540c\u671f\u901a\u4fe1\u3057\u305f\u308amutations\u3092\u547c\u3073\u51fa\u3057\u305f\u308a\u3057\u307e\u3059\u3002<\/p>\n
module<\/h3>\n
module\u306f\u4e0a\u306e4\u3064\u3092\u307e\u3068\u3081\u308b\u6a5f\u80fd\u3067\u3059\u3002\u6a5f\u80fd\u304c\u5927\u304d\u304f\u306a\u3063\u305f\u6642\u306b\u30b9\u30c8\u30a2\u3092\u5206\u3051\u305f\u3044\u6642\u306b\u4f7f\u3044\u307e\u3059\u3002<\/p>\n
nuxt.js\u3067module\u3092\u4f7f\u3044\u305f\u3044\u5834\u5408\u306fstore\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306e\u4e0b\u306bindex.js\u4ee5\u5916\u306ejs\u30d5\u30a1\u30a4\u30eb(\u4f8b:todos.js)\u3092\u4f5c\u6210\u3059\u308b\u3068\u81ea\u52d5\u7684\u306bmodule\u306b\u306a\u308b\u307f\u305f\u3044\u3067\u3059\u3002<\/p>\n
\u30a4\u30e1\u30fc\u30b8\u7528\u306e\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9\u306f\u4ee5\u4e0b\u306b\u306a\u308a\u307e\u3059\u3002(\u53c2\u7167\u5143\u306f\u3053\u3061\u3089<\/a>)<\/p>\n
const moduleA = {\r\n  state: () => ({ ... }),\r\n  mutations: { ... },\r\n  actions: { ... },\r\n  getters: { ... }\r\n}\r\n\r\nconst moduleB = {\r\n  state: () => ({ ... }),\r\n  mutations: { ... },\r\n  actions: { ... }\r\n}\r\n\r\nconst store = new Vuex.Store({\r\n  modules: {\r\n    a: moduleA,\r\n    b: moduleB\r\n  }\r\n})<\/pre>\n
 <\/p>\n
vuex\u306e\u4f7f\u3044\u65b9<\/h2>\n
\u6b21\u306bvuex\u3092\u64cd\u4f5c\u3059\u308b\u753b\u9762\u3092\u898b\u3066\u307f\u307e\u3059\u3002<\/p>\n
<template>\r\n  <div>\r\n    <ul>\r\n      <li\r\n        v-for=\"todo in todos\"\r\n        :key=\"todo.id\">\r\n        <span>{{ todo.title }}<\/span>\r\n        <small \r\n          class=\"change-status\" \r\n          @click=\"handleDoneTodo(todo)\">\r\n          done\r\n        <\/small>\r\n      <\/li>\r\n    <\/ul>\r\n  <\/div>\r\n<\/template>\r\n\r\n<script>\r\nimport { mapGetters, mapActions } from 'vuex'\r\nimport _ from 'lodash'\r\n\r\nexport default {\r\n  computed: {\r\n    ...mapGetters(['todos'])\r\n  },\r\n  methods: {\r\n    async handleDoneTodo(todo) {\r\n      const payload = _.cloneDeep(todo)\r\n      payload.status = 'done'\r\n      await this.updateTodo(payload)\r\n    },\r\n    ...mapActions(['updateTodo'])\r\n  }\r\n}\r\n<\/script>\r\n\r\n<style scoped>\r\n.change-status {\r\n  text-decoration: underline;\r\n  cursor: pointer;\r\n  text-indent: 1em;\r\n}\r\n<\/style><\/pre>\n
vuex\u3092\u4f7f\u7528\u3059\u308b\u969b\u306f\u305d\u306e\u307e\u307egetters\u3084actions\u3092\u547c\u3073\u51fa\u3059\u306e\u3067\u306f\u306a\u304f\u3001vuex\u304b\u3089mapGetters\u3084mapActions\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002<\/p>\n
mapGetters\u7b49\u30d8\u30eb\u30d1\u30fc\u3092\u4f7f\u3046\u306e\u306f\u8907\u6570\u306estate\u3084getters\u3092\u5ba3\u8a00\u3059\u308b\u969b\u3001\u6bce\u56destore.getters.getters\u540d\u306e\u69d8\u306b\u8a18\u8ff0\u3059\u308b\u306e\u306f\u5197\u9577\u306a\u306e\u3067\u3001\u7701\u7565\u3059\u308b\u305f\u3081\u306b\u4f7f\u3046\u3088\u3046\u3067\u3059\u3002<\/p>\n
 <\/p>\n
\u3053\u308c\u3050\u3089\u3044\u7406\u89e3\u3067\u304d\u3066\u3044\u305f\u3089\u3072\u3068\u307e\u305aOK\u3067\u3057\u3087\u3046\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
\u6700\u8fd1nuxt.js\u3092\u89e6\u3063\u3066\u3044\u3066vuex\u306b\u3064\u3044\u3066\u7406\u89e3\u3059\u308b\u307e\u3067\u3061\u3087\u3063\u3068\u6642\u9593\u304c\u304b\u304b\u3063\u305f\u306e\u3067\u3001\u30dd\u30a4\u30f3\u30c8\u3092\u6574\u7406 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[11],"tags":[],"class_list":["post-479","post","type-post","status-publish","format-standard","hentry","category-javascript"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t