Working with data (Vuex)

Author: ferrywlto

ClientApp/app.js

@@ -1,7 +1,8 @@
 import Vue from 'vue';
 import App from './components/App.vue';
-
+import store from './vuex/store.js';
 const app = new Vue({
+    store,
     ...App //... is spread operator if App is Array; is rest(remaining) properties if App is Object
 });
 

ClientApp/components/App.vue

@@ -1,5 +1,21 @@
+
+<script>
+import { mapGetters, mapActions } from 'vuex';
+import Message from './Message.vue';
+export default {
+    components: { Message },
+    computed: mapGetters(['messages', 'lastFetchedMessageDate']),
+    methods: mapActions(['fetchMessages']),
+    created () {
+        return this.$store.dispatch('fetchInitialMessages')
+    }
+}
+</script>
+
 <template>
     <div>
         <h1>Hello from Vue#!!!#</h1>
+        <Message v-for="(msg, index) in messages" :message="msg" :key="index" />
+        <button @click="fetchMessages(lastFetchedMessageDate)">Fetch a message</button>
     </div>
-</template>
+</template>

ClientApp/components/Message.vue

@@ -0,0 +1,12 @@
+<template>
+    <div>
+        <h2>{{ message.title }}</h2>
+        <p>{{ message.text }}</p>
+    </div>
+</template>
+
+<script>
+export default {
+  props: ['message']
+}
+</script>

ClientApp/vuex/actions.js

@@ -0,0 +1,18 @@
+import axios from 'axios';
+
+export const fetchInitialMessages = ({ commit }) => {
+    axios.get('initialMessages').then(response => {
+        commit("INITIAL_MESSAGES", response.data);
+    }).catch(err => {
+        console.log(err);
+    });
+};
+
+export const fetchMessages = ({ commit }, lastFetchedMessageDate) => {
+    axios.get('/fetchMessages?lastFetchedMessageDate='+lastFetchedMessageDate)
+    .then(response => {
+        commit("FETCH_MESSAGES", response.data);
+    }).catch(err => {
+        console.log(err);
+    });
+};

ClientApp/vuex/store.js

@@ -0,0 +1,31 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import { fetchInitialMessages, fetchMessages } from './actions';
+import minBy from 'lodash/minBy';
+
+Vue.use(Vuex);
+
+const store = new Vuex.Store({
+    state: { messages: [], lastFetchedMessageDate: -1},
+
+    mutations: {
+        INITIAL_MESSAGES: (state, payload) => {
+            state.messages = payload.messages;
+            state.lastFetchedMessageDate = payload.lastFetchedMessageDate;
+        },
+        FETCH_MESSAGES: (state, payload) => {
+            state.messages = state.messages.concat(payload);
+            state.lastFetchedMessageDate = minBy(state.messages, 'date').date;
+        }
+    },
+    getters: {
+        messages: state => state.messages,
+        lastFetchedMessageDate: state => state.lastFetchedMessageDate
+    },
+    actions: {
+        fetchInitialMessages,
+        fetchMessages
+    }
+});
+
+export default store;

README.md

@@ -0,0 +1,17 @@
+This repository is a clone from Stu Ratcliffe [Server rendering Vue.js applications with ASP.NET Core](https://github.com/sturatcliffe/VueDotnetSSR)
+
+Following his articile and trying to have some write up. (e.g. using latest packages in package.json)
+
+## Packages used:
+- lodash <- similiar to numpy in Python
+- axios <- Promise based HTTP client for the browser and Node.js
+- vuex <- Vue variant of Flux implementation, just like Redux in React
+### Working with data:
+- .Net part
+    1. Message.cs
+    2. FakeMessageStore.cs
+    3. ClientState.cs
+- Vue part
+    0. (create ClientApp/vuex folder)
+    1. ClientApp/vuex/action.js
+    2. ClientApp/vuex/store.js

Vuex Flow.png

@@ -10,7 +10,10 @@
   "license": "MIT",
   "private": true,
   "dependencies": {
-    "vue": "^2.5.8"
+    "vue": "^2.5.8",
+    "vuex": "^3.0.1",
+    "lodash": "^4.17.4",
+    "axios": "^0.17.1"
   },
   "devDependencies": {
     "babel-core": "^6.26.0",