{"id":1840,"date":"2018-06-08T22:22:20","date_gmt":"2018-06-08T13:22:20","guid":{"rendered":"https:\/\/lovelinux.mydns.jp\/?p=1840"},"modified":"2018-06-08T22:23:52","modified_gmt":"2018-06-08T13:23:52","slug":"vue-js%e3%81%a8vuex%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%a6%e3%80%81todo%e3%82%a2%e3%83%97%e3%83%aa%e3%82%92%e4%bd%9c%e3%81%a3%e3%81%a6%e3%81%bf%e3%82%88%e3%81%86%e3%80%82","status":"publish","type":"post","link":"https:\/\/lovelinux.mydns.jp\/?p=1840","title":{"rendered":"Vue.js\u3068Vuex\u3092\u4f7f\u3063\u3066\u3001TODO\u30a2\u30d7\u30ea\u3092\u4f5c\u3063\u3066\u307f\u3088\u3046\u3002"},"content":{"rendered":"<p><a href=\"https:\/\/lovelinux.mydns.jp\/?p=1834\">\u524d\u56de\u306e\u30ab\u30a6\u30f3\u30bf\u30fc\u30a2\u30d7\u30ea<\/a>\u306b\u5f15\u304d\u7d9a\u304d\u3001\u4eca\u56de\u306fTODO\u30a2\u30d7\u30ea\u3092\u4f5c\u3063\u3066\u307f\u3088\u3046\u3068\u601d\u3044\u307e\u3059\u3002<br \/>\n\u57fa\u672c\u306f\u3001\u524d\u56de\u304a\u8a71\u3057\u3057\u305f\u306e\u3067\u3001\u4eca\u56de\u306f\u3001\u524d\u56de\u8aac\u660e\u3057\u3066\u3053\u306a\u304b\u3063\u305f\u90e8\u5206\u306b\u6ce8\u529b\u3092\u7f6e\u3044\u3066\u8aac\u660e\u3057\u307e\u3059\u3002<\/p>\n<p>\u307e\u3060Vue.js\u306e\u521d\u5fc3\u8005\u3092\u3061\u3087\u3063\u3068\u8d85\u3048\u305f\u3050\u3089\u3044\u3067\u3059\u304c\u30fb\u30fb\u30fb<br \/>\n\u307e\u305aVue.js\u3068Vuex\u3067\u30a2\u30d7\u30ea\u3092\u7d44\u3080\u306b\u306f\u3001\u30a2\u30d7\u30ea\u306e\u5168\u4f53\u50cf\u3092\u30a4\u30e1\u30fc\u30b8\u3057\u3001<br \/>\n\u3069\u3093\u306a\u753b\u9762\u3067\u3001\u3069\u3093\u306a\u30a4\u30d9\u30f3\u30c8\u304c\u3042\u3063\u3066\u3001\u3069\u3093\u306a\u5024\u3092\u4fdd\u6301\u3057\u306a\u3051\u308c\u3070\u306a\u3089\u306a\u3044\u304b\u3092\u3057\u3063\u304b\u308a\u3068\u628a\u63e1\u3059\u308b\u3002<\/p>\n<p>\u753b\u9762\u306e\u7d75\u306a\u3093\u304b\u63cf\u304f\u3068\u3044\u3044\u304b\u3082\u3067\u3059\u306d\u3002<\/p>\n<p>\u3067\u3001\u4eca\u56de\u306e\u51fa\u6765\u4e0a\u304c\u308a\u30a4\u30e1\u30fc\u30b8\u306f\u3053\u3093\u306a\u611f\u3058\u3002<\/p>\n<p><a href=\"https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2018\/06\/Screen-Shot-2018-06-08-at-21.20.11.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2018\/06\/Screen-Shot-2018-06-08-at-21.20.11.png\" alt=\"Screen Shot 2018-06-08 at 21.20.11\" width=\"435\" height=\"515\" class=\"alignnone size-full wp-image-1841\" \/><\/a><\/p>\n<p>\u30da\u30fc\u30b8\u4e0a\u90e8\u306b\u3001\u65b0\u3057\u3044TODO\u3092\u5165\u529b\u3059\u308b\u5834\u6240\u304c\u3042\u3063\u3066\u3001\u8ffd\u52a0\u3059\u308b\u3068\u3001\u4e0b\u306b\u65b0\u305f\u306aTODO\u3068\u3057\u3066\u8868\u793a\u3055\u308c\u308b\u3002<br \/>\n\u8868\u793a\u3055\u308c\u305fTODO\u306e\u6587\u5b57\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u3001\u51e6\u7406\u6e08\u307f\u306b\u306a\u308a\u3001\u524a\u9664\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u3001\u30ea\u30b9\u30c8\u304b\u3089\u524a\u9664\u3055\u308c\u308b\u3002<br \/>\n\u3053\u308c\u3060\u3051\u3067\u3059\u3002<\/p>\n<p>\u3067\u306f\u3001Vuex\u306estore\u4f5c\u6210\u3044\u3063\u3066\u307f\u307e\u3057\u3087\u3046\uff01\uff01<\/p>\n<p>\u5024\u3092\u4fdd\u6301\u3057\u306a\u3051\u308c\u3070\u306a\u3089\u306a\u3044\u3082\u306e\u306f\u4ee5\u4e0b\u306e\uff12\u3064<br \/>\n\u30fbTODO\u306e\u30a2\u30a4\u30c6\u30e0\u5168\u3066<br \/>\n\u30fb\u65b0\u3057\u3044TODO\u306e\u5165\u529b\u9014\u4e2d\u306e\u6587\u5b57<\/p>\n<p>\u30e6\u30fc\u30b6\u30fc\u306e\u64cd\u4f5c\u3067\u30a2\u30af\u30b7\u30e7\u30f3\u304c\u8d77\u3053\u308b\u5834\u6240<br \/>\n\u30fb\u8ffd\u52a0\u30dc\u30bf\u30f3\u3067\u65b0\u3057\u3044TODO\u304c\u8ffd\u52a0<br \/>\n\u30fbTODO\u306e\u6587\u5b57\u5217\u30af\u30ea\u30c3\u30af\u3067\u3001\u51e6\u7406\u6e08\u307f<br \/>\n\u30fb\u524a\u9664\u30dc\u30bf\u30f3\u3067\u3001\u30ea\u30b9\u30c8\u304b\u3089\u524a\u9664<\/p>\n<p>store\u304b\u3089\u53d6\u5f97\u3057\u305f\u3044\u3082\u306e<br \/>\n\u30fbTODO\u306e\u30a2\u30a4\u30c6\u30e0\u5168\u3066<br \/>\n\u30fb\u65b0\u3057\u3044TODO\u306e\u5165\u529b\u9014\u4e2d\u306e\u6587\u5b57<\/p>\n<p>\u3067\u306f\u307e\u305a\u3001mutation-type.js\u306b\u5b9a\u7fa9\u3059\u3079\u304d\u5909\u6570\u3067\u3059\u3002<\/p>\n<p>src\/store\/mutation-type.js<br \/>\n[bash]<br \/>\nexport const ADD_TODO = &#8216;ADD_TODO&#8217;<br \/>\nexport const DONE_TODO = &#8216;DONE_TODO&#8217;<br \/>\nexport const REMOVE_TODO = &#8216;REMOVE_TODO&#8217;<br \/>\nexport const GET_TODOS = &#8216;GET_TODOS&#8217;<br \/>\nexport const CHANGE_MYSTRING = &#8216;CHANGE_MYSTRING&#8217;<\/p>\n<p>[\/bash]<\/p>\n<p>\u6b21\u3001store\u3092\u5b9a\u7fa9\u3057\u307e\u3057\u3087\u3046\u3002<br \/>\nsrc\/store\/todo.js<\/p>\n<p>[bash]<br \/>\nimport { ADD_TODO, DONE_TODO, REMOVE_TODO, CHANGE_MYSTRING, GET_TODOS } from &#8216;.\/mutation-type&#8217;<\/p>\n<p>const todo = {<br \/>\n  namespaced: true,<br \/>\n  state: {<br \/>\n    items: [],<br \/>\n    mystring: &#8221;<br \/>\n  },<br \/>\n  actions: {<br \/>\n    [ADD_TODO] ({commit, state, rootState}, newValue) {<br \/>\n      let newItem = {<br \/>\n        todo: newValue,<br \/>\n        is_done: false<br \/>\n      }<br \/>\n      commit(ADD_TODO, {data: newItem})<br \/>\n      commit(CHANGE_MYSTRING, {data: &#8221;})<br \/>\n    },<br \/>\n    [DONE_TODO] ({commit, state, rootState}, selItem) {<br \/>\n      commit(DONE_TODO, {data: selItem})<br \/>\n    },<br \/>\n    [REMOVE_TODO] ({commit, state, rootState}, selItem) {<br \/>\n      commit(REMOVE_TODO, {data: selItem})<br \/>\n    }<br \/>\n  },<br \/>\n  mutations: {<br \/>\n    [ADD_TODO] (state, payload) {<br \/>\n      state.items.push(payload.data)<br \/>\n    },<br \/>\n    [DONE_TODO] (state, payload) {<br \/>\n      state.items.map(it => {<br \/>\n        if (it.todo == payload.data.todo){<br \/>\n          it.is_done = !it.is_done<br \/>\n        }<br \/>\n      })<br \/>\n    },<br \/>\n    [REMOVE_TODO] (state, payload) {<br \/>\n      for (let i = 0; i < state.items.length; i++){\n        if (state.items[i].todo == payload.data.todo){\n          state.items.splice(i, 1)\n          break\n        }\n      }\n    },\n    [CHANGE_MYSTRING] (state, payload) {\n      state.mystring = payload.data\n    }\n  },\n  getters: {\n    [GET_TODOS] (state, getters, rootState) {\n      return state.items\n    }\n  }\n}\n\nexport default todo\n\n[\/bash]\n\n\nstore\u306e\u30eb\u30fc\u30c8\u30d5\u30a1\u30a4\u30eb\u3001\u3000modules\u306b todo \u3082\u8ffd\u52a0\u3057\u307e\u3057\u3087\u3046\u3002\n\n[bash]\nimport Vue from 'vue'\nimport Vuex from 'vuex'\n\nimport counter from '.\/counter'\nimport todo from '.\/todo'\n\nVue.use(Vuex)\n\n\nconst store = new Vuex.Store({\n  modules :{\n    'counter': counter,\n    'todo': todo,\n  }\n})\n\nexport default store\n\n[\/bash]\n\n\n\n\u6b21\u306b\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u3067\u3059\u3002\n\u3061\u3087\u3063\u3068\u3053\u3053\u306f\u8aac\u660e\u3092\u52a0\u3048\u3066\u304a\u304d\u307e\u3059\u3002\nTodo\u306e\uff11\u3064\u3092\u8868\u3059\u306e\u306f Leaf\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\u3059\u3002\nmapGetters\u3067\u53d6\u5f97\u3057\u305f\u3000todos \u3092 v-for\u3067\u30eb\u30fc\u30d7\u3055\u305b\u307e\u3059\u3002\nLeaf\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u306bToto\u30a2\u30a4\u30c6\u30e0\u306e\uff11\u3064\u306e\u30c7\u30fc\u30bf\u3092\u5f15\u304d\u6e21\u3057\u307e\u3059\u3002\n\n\u65b0\u3057\u3044Todo\u306e\u6587\u5b57\u306f\u5165\u529b\u9014\u4e2d\u306e\u3082\u306e\u3082\u5168\u3066\u7ba1\u7406\u3057\u307e\u3059\u3002\n\u3064\u307e\u308a\u3000IN\/OUT\u53cc\u65b9\u5411\u7ba1\u7406\u3067\u3059\uff08v-model\uff09\u3002\n\n\u305d\u306e\u5834\u5408\u306f\u3000computed\u306b\u3000xxxx \u3092\u7528\u610f\u3057\u3066\u3001\u305d\u3053\u306b\nget\/set \u3092\u4f5c\u308a\u307e\u3059\u3002\n\n\u30cd\u30b9\u30c8\u3057\u305f\u30b9\u30c8\u30a2\u3067\u3059\u304c\u3001\u53d6\u5f97\u306f\u7d20\u76f4\u306b\nthis.$store.state.todo.mystring\n\n\u30b3\u30df\u30c3\u30c8\u306e\u65b9\u306f\u3061\u3087\u3063\u3068\u5de5\u592b\u3057\u307e\u3059\u3002\nthis.$store.commit('todo\/' + CHANGE_MYSTRING, {data: value})\n\n\n\uff11\u3064\uff11\u3064\u306eTODO\u3092\u8868\u3059 Leaf\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306f\u3000components\u3067\u5b9a\u7fa9\u3057\u3066\u304a\u304d\u307e\u3059\u3002\n\n\nsrc\/components\/Todo.vue\n[bash]\n<template><\/p>\n<div>\n<h3>This is Todo App<\/h3>\n<p>    <input type=\"text\" v-model=\"mystring\" \/><br \/>\n    <button @click=\"ADD_TODO(mystring)\">\u8ffd\u52a0<\/button><\/p>\n<p>    <Leaf v-for=\"item in todos\" :item=\"item\" \/><\/p><\/div>\n<p><\/template><\/p>\n<p><script>\nimport { ADD_TODO, GET_TODOS, CHANGE_MYSTRING } from '..\/store\/mutation-type'\nimport { mapGetters, mapActions} from 'vuex'\nimport Leaf from '.\/Leaf'<\/p>\n<p>export default {\n  name: 'todo',\n  components: {\n    Leaf\n  },\n  computed: {\n    mystring: {\n      get () {\n        return this.$store.state.todo.mystring\n      },\n      set (value){\n        this.$store.commit('todo\/' + CHANGE_MYSTRING, {data: value})\n      }\n    },\n    ...mapGetters('todo', {\n      todos: GET_TODOS\n    })\n  },\n  methods: {\n    ...mapActions('todo', [\n      ADD_TODO\n    ])\n  }<\/p>\n<p>}\n<\/script><\/p>\n<style scoped>\n<\/style>\n<p>[\/bash]<\/p>\n<p>Leaf\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u3064\u3044\u3066<\/p>\n<p>\u89aa\u304b\u3089\u5f15\u304d\u6e21\u3055\u308c\u305f \u30d7\u30ed\u30d1\u30c6\u30a3\u3092 props\u3067\u53d7\u3051\u307e\u3059\u3002<br \/>\n\u3042\u3068\u306f\u7279\u6b8a\u306a\u3068\u3053\u308d\u3068\u3044\u3048\u3070\u3001v-bind:class \u3067 \u30af\u30e9\u30b9\u306e\u30aa\u30f3\u30aa\u30d5\u3092\u5236\u5fa1\u3057\u3066\u3044\u308b\u3068\u3053\u308d\u3067\u3057\u3087\u3046\u304b\u3002<\/p>\n<p>[bash]<br \/>\n<template><\/p>\n<div >\n<div class=\"fl lhand\" v-bind:class=\"{done: item.is_done}\" @click=\"DONE_TODO(item)\">{{item.todo}}<\/div>\n<div class=\"fl rhand\"><button @click=\"REMOVE_TODO(item)\">\u524a\u9664<\/button><\/div>\n<div class=\"cls\" \/>\n  <\/div>\n<p><\/template><\/p>\n<p><script>\nimport { DONE_TODO, REMOVE_TODO} from '..\/store\/mutation-type'\nimport { mapActions } from 'vuex'<\/p>\n<p>export default {\n  name : \"Leaf\",\n  props: ['item'],\n  methods: {\n    ...mapActions('todo',[\n      DONE_TODO,\n      REMOVE_TODO\n    ])\n  }\n}<\/p>\n<p><\/script><\/p>\n<style scoped>\ndiv.done {\n  text-decoration: line-through;\n}<\/p>\n<p>div.fl {\n  float: left;\n}\ndiv.cls {\n  clear: both;\n}<\/p>\n<p>div.lhand {\n   width: 40%;\n}<\/p>\n<p>div.rhand {\n  width: 15%;\n}<\/p>\n<\/style>\n<p>[\/bash]<\/p>\n<p>\u6700\u5f8c\u306b\u30eb\u30fc\u30c8\u30d5\u30a1\u30a4\u30eb\u306e\u7de8\u96c6\u3067\u3059\u3002<br \/>\n[bash]<br \/>\nimport Vue from &#8216;vue&#8217;<br \/>\nimport Router from &#8216;vue-router&#8217;<br \/>\nimport HelloWorld from &#8216;@\/components\/HelloWorld&#8217;<br \/>\nimport Counter from &#8216;@\/components\/Counter&#8217;<br \/>\nimport Todo from &#8216;@\/components\/Todo&#8217;<\/p>\n<p>Vue.use(Router)<\/p>\n<p>export default new Router({<br \/>\n  routes: [<br \/>\n    {<br \/>\n      path: &#8216;\/&#8217;,<br \/>\n      name: &#8216;HelloWorld&#8217;,<br \/>\n      component: HelloWorld<br \/>\n    },<br \/>\n    {<br \/>\n      path: &#8216;\/counter&#8217;,<br \/>\n      name: &#8216;Counter&#8217;,<br \/>\n      component: Counter<br \/>\n    },<\/p>\n<p>    {<br \/>\n      path: &#8216;\/todo&#8217;,<br \/>\n      name: &#8216;Todo&#8217;,<br \/>\n      component: Todo<br \/>\n    }<\/p>\n<p>  ]<br \/>\n})<br \/>\n[\/bash]<\/p>\n<p>npm run dev \u3057\u3066<\/p>\n<p>http:\/\/localhost:8080\/#\/todo <\/p>\n<p>\u3067\u8868\u793a\u3055\u308c\u307e\u3059\u3002<br \/>\n\u3059\u3054\u304f\u8aac\u660e\u3092\u3059\u3063\u98db\u3070\u3057\u307e\u3057\u305f\u304c\u3001\u30ab\u30a6\u30f3\u30bf\u30fc\u30a2\u30d7\u30ea\u306e\u30bd\u30fc\u30b9\u306e\u8aac\u660e\u3092\u5408\u308f\u305b\u3066\u8aad\u3080\u3068<br \/>\n\u7406\u89e3\u3044\u305f\u3060\u3051\u308b\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n<p>\u524d\u56de\u306e\u30ab\u30a6\u30f3\u30bf\u30fc\u3068\u4eca\u56de\u306eTODO\u30a2\u30d7\u30ea\u306e<a href=\"https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2018\/06\/vue4th.zip\">\u30bd\u30fc\u30b9\u3092\u6dfb\u4ed8\u3057\u307e\u3059\u3002\uff08vue4th.zip\uff09<\/a><br \/>\n\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3057\u3066\u3001\u305d\u306e\u30d5\u30a9\u30eb\u30c0\u5185\u3067\u3001npm install \u3059\u308c\u3070\u4f7f\u3048\u308b\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u524d\u56de\u306e\u30ab\u30a6\u30f3\u30bf\u30fc\u30a2\u30d7\u30ea\u306b\u5f15\u304d\u7d9a\u304d\u3001\u4eca\u56de\u306fTODO\u30a2\u30d7\u30ea\u3092\u4f5c\u3063\u3066\u307f\u3088\u3046\u3068\u601d\u3044\u307e\u3059\u3002 \u57fa\u672c\u306f\u3001\u524d\u56de\u304a\u8a71\u3057\u3057\u305f\u306e\u3067\u3001\u4eca\u56de\u306f\u3001\u524d\u56de\u8aac\u660e\u3057\u3066\u3053\u306a\u304b\u3063\u305f\u90e8\u5206\u306b\u6ce8\u529b\u3092\u7f6e\u3044\u3066\u8aac\u660e\u3057\u307e\u3059\u3002 \u307e\u3060Vue.js\u306e\u521d\u5fc3\u8005\u3092\u3061\u3087\u3063\u3068\u8d85\u3048\u305f\u3050\u3089\u3044\u3067\u3059\u304c\u30fb\u30fb\u30fb \u307e\u305aVue.js\u3068Vuex\u3067\u30a2\u30d7\u30ea\u3092\u7d44\u3080\u306b\u306f\u3001\u30a2\u30d7\u30ea\u306e\u5168\u4f53\u50cf\u3092\u30a4\u30e1\u30fc\u30b8\u3057\u3001 \u3069\u3093\u306a\u753b\u9762\u3067\u3001\u3069\u3093\u306a\u30a4\u30d9\u30f3\u30c8\u304c\u3042\u3063\u3066\u3001\u3069\u3093\u306a\u5024\u3092\u4fdd\u6301\u3057\u306a\u3051\u308c\u3070\u306a\u3089\u306a\u3044\u304b\u3092\u3057\u3063\u304b\u308a\u3068\u628a\u63e1\u3059\u308b\u3002 \u753b\u9762\u306e\u7d75\u306a\u3093\u304b\u63cf\u304f\u3068\u3044\u3044\u304b\u3082\u3067\u3059\u306d\u3002 \u3067\u3001\u4eca\u56de\u306e\u51fa\u6765\u4e0a\u304c\u308a\u30a4\u30e1\u30fc\u30b8\u306f\u3053\u3093\u306a\u611f\u3058\u3002 \u30da\u30fc\u30b8\u4e0a\u90e8\u306b\u3001\u65b0\u3057\u3044TODO\u3092\u5165\u529b\u3059\u308b\u5834\u6240\u304c\u3042\u3063\u3066\u3001\u8ffd\u52a0\u3059\u308b\u3068\u3001\u4e0b\u306b\u65b0\u305f\u306aTODO\u3068\u3057\u3066\u8868\u793a\u3055\u308c\u308b\u3002 \u8868\u793a\u3055\u308c\u305fTODO\u306e\u6587\u5b57\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u3001\u51e6\u7406\u6e08\u307f\u306b\u306a\u308a\u3001\u524a\u9664\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u3001\u30ea\u30b9\u30c8\u304b\u3089\u524a\u9664\u3055\u308c\u308b\u3002 \u3053\u308c\u3060\u3051\u3067\u3059\u3002 \u3067\u306f\u3001Vuex\u306estore\u4f5c\u6210\u3044\u3063\u3066\u307f\u307e\u3057\u3087\u3046\uff01\uff01 \u5024\u3092\u4fdd\u6301\u3057\u306a\u3051\u308c\u3070\u306a\u3089\u306a\u3044\u3082\u306e\u306f\u4ee5\u4e0b\u306e\uff12\u3064 \u30fbTODO\u306e\u30a2\u30a4\u30c6\u30e0\u5168\u3066 \u30fb\u65b0\u3057\u3044TODO\u306e\u5165\u529b\u9014\u4e2d\u306e\u6587\u5b57 \u30e6\u30fc\u30b6\u30fc\u306e\u64cd\u4f5c\u3067\u30a2\u30af\u30b7\u30e7\u30f3\u304c\u8d77\u3053\u308b\u5834\u6240 \u30fb\u8ffd\u52a0\u30dc\u30bf\u30f3\u3067\u65b0\u3057\u3044TODO\u304c\u8ffd\u52a0 \u30fbTODO\u306e\u6587\u5b57\u5217\u30af\u30ea\u30c3\u30af\u3067\u3001\u51e6\u7406\u6e08\u307f \u30fb\u524a\u9664\u30dc\u30bf\u30f3\u3067\u3001\u30ea\u30b9\u30c8\u304b\u3089\u524a\u9664 store\u304b\u3089\u53d6\u5f97\u3057\u305f\u3044\u3082\u306e \u30fbTODO\u306e\u30a2\u30a4\u30c6\u30e0\u5168\u3066 \u30fb\u65b0\u3057\u3044TODO\u306e\u5165\u529b\u9014\u4e2d\u306e\u6587\u5b57 \u3067\u306f\u307e\u305a\u3001mutation-type.js\u306b\u5b9a\u7fa9\u3059\u3079\u304d\u5909\u6570\u3067\u3059\u3002 src\/store\/mutation-type.js [bash] export const ADD_TODO = &#8216;ADD_TODO&#8217; export const DONE_TODO = &#8216;DONE_TODO&#8217; export const REMOVE_TODO = &#8216;REMOVE_TODO&#8217; export const GET_TODOS = &#8216;GET_TODOS&#8217; export const CHANGE_MYSTRING = &#8216;CHANGE_MYSTRING&#8217; [\/bash] \u6b21\u3001store\u3092\u5b9a\u7fa9\u3057\u307e\u3057\u3087\u3046\u3002 src\/store\/todo.js [bash] import { ADD_TODO, DONE_TODO, REMOVE_TODO, CHANGE_MYSTRING, GET_TODOS } from &#8216;.\/mutation-type&#8217; const todo = { namespaced: true, state: { items: [], mystring: &#8221; }, actions: { [ADD_TODO] ({commit, state, rootState}, newValue) { let newItem = { todo: newValue, is_done: false } commit(ADD_TODO, {data: newItem}) commit(CHANGE_MYSTRING, {data: &#8221;}) }, [DONE_TODO] ({commit, state, rootState}, selItem) { commit(DONE_TODO, {data: selItem}) }, [REMOVE_TODO] ({commit, state, rootState}, selItem) { commit(REMOVE_TODO, {data: selItem}) } }, mutations: { [ADD_TODO] (state, payload) { state.items.push(payload.data) }, [DONE_TODO] (state, payload) { state.items.map(it => { if (it.todo == payload.data.todo){ it.is_done = !it.is_done } }) }, [REMOVE_TODO] (state, payload) { for (let i = 0; i < state.items.length; i++){ if (state.items[i].todo == payload.data.todo){ state.items.splice(i, 1) break } } }, [CHANGE_MYSTRING] (state, payload) { state.mystring = payload.data } }, getters: { [GET_TODOS] (state, getters, rootState) { return state.items } } } export default todo [\/bash] store\u306e\u30eb\u30fc\u30c8\u30d5\u30a1\u30a4\u30eb\u3001\u3000modules\u306b todo \u3082\u8ffd\u52a0\u3057\u307e\u3057\u3087\u3046\u3002 [bash] import Vue from 'vue' import Vuex from 'vuex' import counter from '.\/counter' import todo from '.\/todo' Vue.use(Vuex) const store = new Vuex.Store({ modules :{ 'counter': counter, 'todo': todo, } }) export default store [\/bash] \u6b21\u306b\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u3067\u3059\u3002 \u3061\u3087\u3063\u3068\u3053\u3053\u306f\u8aac\u660e\u3092\u52a0\u3048\u3066\u304a\u304d\u307e\u3059\u3002 Todo\u306e\uff11\u3064\u3092\u8868\u3059\u306e\u306f Leaf\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\u3059\u3002 mapGetters\u3067\u53d6\u5f97\u3057\u305f\u3000todos \u3092 v-for\u3067\u30eb\u30fc\u30d7\u3055\u305b\u307e\u3059\u3002 Leaf\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u306bToto\u30a2\u30a4\u30c6\u30e0\u306e\uff11\u3064\u306e\u30c7\u30fc\u30bf\u3092\u5f15\u304d\u6e21\u3057\u307e\u3059\u3002 \u65b0\u3057\u3044Todo\u306e\u6587\u5b57\u306f\u5165\u529b\u9014\u4e2d\u306e\u3082\u306e\u3082\u5168\u3066\u7ba1\u7406\u3057\u307e\u3059\u3002 \u3064\u307e\u308a\u3000IN\/OUT\u53cc\u65b9\u5411\u7ba1\u7406\u3067\u3059\uff08v-model\uff09\u3002 \u305d\u306e\u5834\u5408\u306f\u3000computed\u306b\u3000xxxx \u3092\u7528\u610f\u3057\u3066\u3001\u305d\u3053\u306b get\/set \u3092\u4f5c\u308a\u307e\u3059\u3002 \u30cd\u30b9\u30c8\u3057\u305f\u30b9\u30c8\u30a2\u3067\u3059\u304c\u3001\u53d6\u5f97\u306f\u7d20\u76f4\u306b this.$store.state.todo.mystring \u30b3\u30df\u30c3\u30c8\u306e\u65b9\u306f\u3061\u3087\u3063\u3068\u5de5\u592b\u3057\u307e\u3059\u3002 this.$store.commit('todo\/' + CHANGE_MYSTRING, {data: value}) \uff11\u3064\uff11\u3064\u306eTODO\u3092\u8868\u3059 Leaf\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306f\u3000components\u3067\u5b9a\u7fa9\u3057\u3066\u304a\u304d\u307e\u3059\u3002 src\/components\/Todo.vue [bash] This is Todo App \u8ffd\u52a0 [\/bash] Leaf\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u3064\u3044\u3066 \u89aa\u304b\u3089\u5f15\u304d\u6e21\u3055\u308c\u305f \u30d7\u30ed\u30d1\u30c6\u30a3\u3092 props\u3067\u53d7\u3051\u307e\u3059\u3002 \u3042\u3068\u306f\u7279\u6b8a\u306a\u3068\u3053\u308d\u3068\u3044\u3048\u3070\u3001v-bind:class \u3067 \u30af\u30e9\u30b9\u306e\u30aa\u30f3\u30aa\u30d5\u3092\u5236\u5fa1\u3057\u3066\u3044\u308b\u3068\u3053\u308d\u3067\u3057\u3087\u3046\u304b\u3002 [bash] {{item.todo}} \u524a\u9664 [\/bash] \u6700\u5f8c\u306b\u30eb\u30fc\u30c8\u30d5\u30a1\u30a4\u30eb\u306e\u7de8\u96c6\u3067\u3059\u3002 [bash] import Vue from &#8216;vue&#8217; import Router from &#8216;vue-router&#8217; import HelloWorld from &#8216;@\/components\/HelloWorld&#8217; import Counter from &#8216;@\/components\/Counter&#8217; import Todo from &#8216;@\/components\/Todo&#8217; Vue.use(Router) export default...\n<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[2],"tags":[98],"class_list":{"0":"post-1840","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-2","7":"tag-vue-js"},"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=\/wp\/v2\/posts\/1840","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1840"}],"version-history":[{"count":4,"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=\/wp\/v2\/posts\/1840\/revisions"}],"predecessor-version":[{"id":1846,"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=\/wp\/v2\/posts\/1840\/revisions\/1846"}],"wp:attachment":[{"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1840"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1840"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1840"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}