{"id":272,"date":"2018-10-15T14:58:24","date_gmt":"2018-10-15T14:58:24","guid":{"rendered":"https:\/\/jmrowe.com\/blog\/?p=272"},"modified":"2018-10-15T15:33:37","modified_gmt":"2018-10-15T15:33:37","slug":"vuex-notes","status":"publish","type":"post","link":"https:\/\/jmrowe.com\/blog\/vuex-notes\/","title":{"rendered":"Vuex Notes"},"content":{"rendered":"

Example Vuex with some comment notes<\/p>\n

\/\/ store.js\r\n\r\nimport Vuex from \"vuex\";\r\nimport Vue from \"vue\";\r\n\r\nVue.use(Vuex);\r\n\r\nexport const store = new Vuex.Store({\r\n  state: {\r\n    count: 0\r\n  },\r\n  getters: {},\r\n  mutations: {\r\n    \/\/mutations alters state directly i.e. state.count=0;\r\n    \/\/can't have async code ( ajax) , must use actions\r\n    exampleMutator:state=> {\r\n      state.count = 10;\r\n    },\r\n    exampleMutatorWithPayload(state, payload) {\r\n      console.log(payload);\r\n    },\r\n    increment: state => {\r\n      state.count++;\r\n    },\r\n  },\r\n  actions: {\r\n    \/\/ provides context to update the state\r\n    \/\/i.e\r\n    exampleAction: context => {\r\n      \/\/context is passed by Vuex and is how we can run async code to\r\n      \/\/ eventually be committed.\r\n      context.commit(\"exampleMutator\");\r\n    },\r\n    \/\/ or deconstruct to get commit ,  payload is second parameter\r\n    exampleActions2: ({ commit }, payload) => {\r\n      console.log(payload);\r\n      commit(\"exampleMutatorWithPayload\", payload);\r\n    }\r\n  }\r\n});\r\n<\/pre>\n
In main.js we add the store via:<\/p>\n
\/\/ main.js\r\n\r\n\/\/ The Vue build version to load with the `import` command\r\n\/\/ (runtime-only or standalone) has been set in webpack.base.conf with an alias.\r\nimport Vue from \"vue\";\r\nimport App from \".\/App\";\r\nimport { store } from \".\/store\/store\";\r\n\r\nVue.config.productionTip = false;\r\n\r\n\/* eslint-disable no-new *\/\r\nnew Vue({\r\n  store,\r\n  el: \"#app\",\r\n  components: { App },\r\n  template: \"<App\/>\"\r\n});\r\n<\/pre>\n
In a component that uses something in the store:<\/p>\n
\/\/example component.js\r\nimport { mapActions } from \"vuex\";\r\nexport default {\r\n  name: \"Counter\",\r\n  methods: {\r\n    \/\/ using mapActions makes it much faster, payload is automatically passed in\r\n    ...mapActions({\r\n      increment: \"increment\",\r\n      decrement: \"decrement\",\r\n      multiplyBy: \"multiply\"\r\n    }),\r\n    otherNonStoreMethods(){\r\n    \r\n     }\r\n\r\n    \/\/ increment() {\r\n    \/\/   \/\/ this is to directly use mutations.\r\n    \/\/   \/\/this.$store.commit(\"increment\");\r\n\r\n    \/\/   \/\/this is how to use actions instead.\r\n    \/\/   this.$store.dispatch(\"increment\");\r\n    \/\/ },\r\n    \/\/ decrement() {\r\n    \/\/   \/\/ this is to directly use mutations.\r\n    \/\/   \/\/this.$store.commit(\"decrement\");\r\n\r\n    \/\/   \/\/using actions instead\r\n    \/\/   this.$store.dispatch(\"decrement\");\r\n    \/\/ },\r\n    \/\/ multiplyBy(by) {\r\n    \/\/   this.$store.dispatch(\"multiply\", by);\r\n    \/\/ }\r\n  }\r\n};<\/pre>\n
Mutations are for non-async updates to the Vuex store. Actions can use async code. Generally, should actions should always be used instead of Mutators.<\/p>\n
If using Mutators.. the update to the store can happen directly. i.e. this.$store.commit('mutatorMethodThatUpdatesStore');<\/code><\/p>\n
Actions use dispatch instead: this.$store.dispatch('mutatorMethodThatUpdatesStore');<\/code><\/p>\n
3 useful methods from Vuex are:<\/p>\n
mapGetters<\/p>\n
mapMutations<\/p>\n
mapActions<\/p>\n
mapState  – mapState should be used instead of creating “dummy” getters. Dummy getters are ones that simply just return the store’s state value.<\/p>\n
Getters should be more used for computed type values or for things such as a filter etc.<\/p>\n
For each of the 4 above..All have either an array of strings of names of state\/getter\/mutation\/action or can pass in an object with key\/value pairs if needing a different name. For example:<\/p>\n
...mapActions({\r\nmultipleBy:'multiply'\r\n});\r\n\r\n\/\/ This will map the store's action \"multiply\" to a component's\r\n\/\/ \"multiplyBy\" method.<\/pre>\n","protected":false},"excerpt":{"rendered":"
Example Vuex with some comment notes \/\/ store.js import Vuex from “vuex”; import Vue from “vue”; Vue.use(Vuex); export const store = new Vuex.Store({ state: { count: 0 }, getters: {}, mutations: { \/\/mutations alters state directly i.e. state.count=0; \/\/can’t have async code ( ajax) , must use actions exampleMutator:state=> { state.count = 10; }, exampleMutatorWithPayload(state, […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[],"class_list":["post-272","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/posts\/272","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/comments?post=272"}],"version-history":[{"count":9,"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/posts\/272\/revisions"}],"predecessor-version":[{"id":281,"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/posts\/272\/revisions\/281"}],"wp:attachment":[{"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/media?parent=272"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/categories?post=272"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/tags?post=272"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}