{"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":"https:\/\/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":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/pattVc-7J","jetpack-related-posts":[{"id":1433,"url":"https:\/\/snow-cat.net\/?p=1433","url_meta":{"origin":479,"position":0},"title":"react\u3067firebase\u306e\u521d\u671f\u8a2d\u5b9a","author":"hiro","date":"2022\u5e747\u670821\u65e5","format":false,"excerpt":"\u6700\u8fd1react\u3067\u6a5f\u80fd\u3092\u4f5c\u3063\u3066\u3044\u308b\u306e\u3067\u3059\u304c\u3001firebase\u304c\u30d0\u30fc\u30b8\u30e7\u30f3\u306b\u3088\u3063\u3066\u7d50\u69cb\u5b9f\u88c5\u65b9\u6cd5\u304c\u9055\u3063\u3066\u82e6\u2026","rel":"","context":"firebase","block_context":{"text":"firebase","link":"https:\/\/snow-cat.net\/?cat=25"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":936,"url":"https:\/\/snow-cat.net\/?p=936","url_meta":{"origin":479,"position":1},"title":"\u30d0\u30c3\u30c1\u3092\u4f5c\u6210\u3059\u308b\u52d8\u6240","author":"hiro","date":"2021\u5e743\u670827\u65e5","format":false,"excerpt":"\u30b5\u30fc\u30d3\u30b9\u3092\u958b\u767a\u3057\u3066\u4fdd\u5b88\u958b\u767a\u306b\u79fb\u3063\u3066\u3044\u304f\u3068\u30d0\u30c3\u30c1\u3067\u30c7\u30fc\u30bf\u3092\u307e\u3068\u3081\u3066\u51e6\u7406\u3059\u308b\u3053\u3068\u3063\u3066\u7d76\u5bfe\u3042\u308a\u307e\u3059\u3088\u306d\u3002 \u2026","rel":"","context":"\u958b\u767a","block_context":{"text":"\u958b\u767a","link":"https:\/\/snow-cat.net\/?cat=9"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":993,"url":"https:\/\/snow-cat.net\/?p=993","url_meta":{"origin":479,"position":2},"title":"Laravel8\u306bvue.js\u3092\u8a2d\u5b9a\u3059\u308b\u65b9\u6cd5","author":"hiro","date":"2021\u5e745\u67083\u65e5","format":false,"excerpt":"\u73fe\u5728\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u9032\u3081\u3066\u3044\u308b\u306e\u3067\u3059\u304c\u3001vue\u3092\u5c0e\u5165\u3059\u308b\u65b9\u6cd5\u306f\u666e\u901a\u306bSPA\u3067\u4f5c\u6210\u3059\u308b\u65b9\u6cd5\u3068\u306f\u82e5\u5e72\u7570\u306a\u308b\u2026","rel":"","context":"JavaScript","block_context":{"text":"JavaScript","link":"https:\/\/snow-cat.net\/?cat=11"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":246,"url":"https:\/\/snow-cat.net\/?p=246","url_meta":{"origin":479,"position":3},"title":"vue.js\u3092\u4e00\u304b\u3089\u8a2d\u5b9a\u3059\u308b","author":"hiro","date":"2019\u5e746\u670830\u65e5","format":false,"excerpt":"\u3053\u3093\u306b\u3061\u308f\u3001\u3086\u304d\u306d\u3053\u3067\u3059\u3002 \u6700\u8fd1vue.js\u306e\u74b0\u5883\u69cb\u7bc9\u3092\u884c\u306a\u3063\u3066\u3044\u305f\u306e\u3067\u9806\u756a\u3092\u307e\u3068\u3081\u3088\u3046\u3068\u601d\u3044\u307e\u3059\u3002\u2026","rel":"","context":"\u305d\u306e\u4ed6\u3082\u308d\u3082\u308d","block_context":{"text":"\u305d\u306e\u4ed6\u3082\u308d\u3082\u308d","link":"https:\/\/snow-cat.net\/?cat=1"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":68,"url":"https:\/\/snow-cat.net\/?p=68","url_meta":{"origin":479,"position":4},"title":"jQuery\u3067\u4f5c\u308b\u7c21\u5358\u306a\u9023\u6253\u9632\u6b62\u51e6\u7406","author":"hiro","date":"2018\u5e7411\u670825\u65e5","format":false,"excerpt":"\u3053\u3093\u306b\u3061\u306f\u3001\u3086\u304d\u306d\u3053\u3067\u3059\u3002 \u4eca\u56de\u306fjQuery\u3067\u66f8\u304f\u9023\u6253\u9632\u6b62\u51e6\u7406\u306b\u3064\u3044\u3066\u66f8\u3044\u3066\u3044\u3053\u3046\u3068\u601d\u3044\u307e\u3059\u3002 \u30b3\u2026","rel":"","context":"JavaScript","block_context":{"text":"JavaScript","link":"https:\/\/snow-cat.net\/?cat=11"},"img":{"alt_text":"","src":"\/\/ir-jp.amazon-adsystem.com\/e\/ir?t=snowcat043-22&l=am2&o=9&a=B07Y3FJ885","width":350,"height":200},"classes":[]},{"id":613,"url":"https:\/\/snow-cat.net\/?p=613","url_meta":{"origin":479,"position":5},"title":"Laravel\u3067model\u3092\u5909\u66f4\u3057\u3066migrate\u3057\u3066\u3082\u53cd\u6620\u3055\u308c\u306a\u3044\u5834\u5408\u306e\u5bfe\u5fdc","author":"hiro","date":"2020\u5e748\u67088\u65e5","format":false,"excerpt":"\u524d\u56de\u3001sqlite\u306b\u5909\u66f4\u3057\u305f\u3042\u3068\u3001model\u5909\u66f4\u3057\u3066migrate\u3057\u3066\u3082\u5b9f\u884c\u3055\u308c\u306a\u304f\u3066\u60c5\u5831\u304c\u306a\u304b\u306a\u304b\u2026","rel":"","context":"PHP","block_context":{"text":"PHP","link":"https:\/\/snow-cat.net\/?cat=20"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/snow-cat.net\/wp-content\/uploads\/2020\/08\/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2020-08-08-20.44.42-300x23.png?resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/snow-cat.net\/index.php?rest_route=\/wp\/v2\/posts\/479","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/snow-cat.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/snow-cat.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/snow-cat.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/snow-cat.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=479"}],"version-history":[{"count":8,"href":"https:\/\/snow-cat.net\/index.php?rest_route=\/wp\/v2\/posts\/479\/revisions"}],"predecessor-version":[{"id":507,"href":"https:\/\/snow-cat.net\/index.php?rest_route=\/wp\/v2\/posts\/479\/revisions\/507"}],"wp:attachment":[{"href":"https:\/\/snow-cat.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=479"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/snow-cat.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=479"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/snow-cat.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=479"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}