From adb8b606abb29e444a2864099d4dbc19a844036a Mon Sep 17 00:00:00 2001
From: dtomlinson <dtomlinson@panaetius.co.uk>
Date: Mon, 16 Mar 2020 02:41:30 +0000
Subject: [PATCH] adding latest

---
 src/views/Home.vue | 28 ++++++++++++++++++++++++++++
 vuex.md            | 42 ++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 70 insertions(+)
 create mode 100644 src/views/Home.vue
 create mode 100644 vuex.md

diff --git a/src/views/Home.vue b/src/views/Home.vue
new file mode 100644
index 0000000..058298f
--- /dev/null
+++ b/src/views/Home.vue
@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <h1>Hello {{ this.currentUser }}</h1>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+export default {
+  async mounted() {
+    await this.$store.dispatch("fetchUser");
+  },
+  computed: {
+    ...mapGetters({ currentUser: "userEmail" })
+  },
+  methods: {
+    getUser() {
+      try {
+        return this.$store.getters.userEmail;
+      } catch (TypeError) {
+        // pass}
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/vuex.md b/vuex.md
new file mode 100644
index 0000000..d8507da
--- /dev/null
+++ b/vuex.md
@@ -0,0 +1,42 @@
+# Vuex
+
+<https://vuex.vuejs.org/>
+
+In `./store/index.js` you can define your state. For simple apps you can leverage this single file. For anything more advanced you should use modules.
+<https://vuex.vuejs.org/guide/modules.html>
+
+## state
+
+The state serves as a single source of truth for what you need. You typically have only one store for each application, but you can break it down into modules if needed.
+
+You declare your variables you need in the state. To affect the state, you do `mutations` and `actions`.
+
+## getters
+
+Getters are like computed propeties for the state. If you needed derived properties of what's in the state - you can define a getter for this purpose. For example, if you have a list in the state you can define a getter that returns the length of that list. This is useful because you might need to do this in more than one Vue component - duplicating code. Using a getter means you can access it from the store.
+
+You can do any function in getters - more complicated actions as properties reduces the amount of duplicated code across components.
+
+## mutations
+
+To change the state you need to use a mutation. Each mutation has a string type and a handler. The handler function is where we peform state modifications and it will receive the state as its first argument.
+
+You cannot call a mutation handler directly - think of them like event registration. To call it, you must do a `store.commit('handlername')`.
+
+You can pass a payload to a mutation, write the mutation to take state, and any other arguments you need. Then do a `store.commit('handlername', arg1)`.
+
+## actions
+
+An action is a function that you can use to manipulate the state. Since mutations have to be _synchronous_, you can use an action if you need _asynchronous_ operations.
+
+An action handler receives a `context` object which exposes the same set of methods/properties on the store instance. So you can use `context.commit` to commit a mutation or access the state and getters with `context.state` and `context.getters`. You can call other actions with `context.dispatch`.
+
+You can use arugment destructuring to write cleaner code, rather than accepting the entire context object:
+
+```javascript
+actions = {
+    async login({dispatch, state}, {email, password}){
+      ...
+    }
+```
+Here this handler only needs to do `context.dispatch` and `context.state`. The `{email, password}` will come from the user object we pass as an argument. Inside this handler we can then access any of the state functions we need to do.