Added new Vuex features using babel

caiobiodere · Feb 19, 2018 · 50c0d53 · 50c0d53
1 parent 7d66d5c
commit 50c0d53
Show file tree

Hide file tree

Showing 7 changed files with 71 additions and 2 deletions.
diff --git a/template_src/package.json b/template_src/package.json
@@ -10,6 +10,7 @@
   ],
   "license": "ISC",
   "devDependencies": {
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-plugin-transform-runtime": "^6.23.0",
     "cheerio": "^1.0.0-rc.2",
     "chokidar": "^1.6.1",
@@ -46,6 +47,7 @@
     "framework7-icons": "^0.9.0",
     "loglevel": "^1.4.1",
     "vue": "^2.5.13",
+    "vuex": "^3.0.1",
     "font-awesome": "^4.7.0"
   }
 }
diff --git a/template_src/src/assets/vue/pages/home.vue b/template_src/src/assets/vue/pages/home.vue
@@ -28,6 +28,9 @@
             <f7-list-item link="/chat/" title="Chat" panel-close>
                 <f7-icon slot="media" icon="fa fa-user fa-fw"></f7-icon>
             </f7-list-item>
+            <f7-list-item link="/vuex/" title="Vuex" panel-close>
+                <f7-icon slot="media" icon="fa fa-battery fa-fw"></f7-icon>
+            </f7-list-item>
         </f7-list>
         <f7-list class="searchbar-not-found">
             <f7-list-item title="Nothing found"></f7-list-item>

diff --git a/template_src/src/assets/vue/pages/vuex.vue b/template_src/src/assets/vue/pages/vuex.vue
@@ -0,0 +1,34 @@
+<template>
+  <f7-page>
+    <f7-navbar title="About F7" back-link="Back" sliding></f7-navbar>
+    <f7-block-title>{{user.name ? "You are already logged" : "Please login"}}</f7-block-title>
+    <f7-list>
+			<f7-list-group v-if="user.name">
+				<f7-list-item>ID: {{user.id}}</f7-list-item>
+			  <f7-list-item>Username: {{user.name}}</f7-list-item>
+			</f7-list-group>
+		</f7-list>	
+    <f7-list>
+		  <f7-list-button color="blue" v-on:click="loginAction">Login Button</f7-list-button>
+		</f7-list>
+  </f7-page>
+</template>
+<script>
+	import { mapState, mapActions } from 'vuex'
+
+  export default {
+  	computed: {
+        ...mapState({
+            user: state => state.user
+        })
+    },
+		methods: {
+			loginAction: function() {
+				const self = this;
+				// Set new user into storage
+        self.userLogged({name: "User", id: "#1"});
+			},
+			...mapActions(['userLogged'])
+		}
+  };
+</script>
diff --git a/template_src/src/assets/vuex/storage.js b/template_src/src/assets/vuex/storage.js
@@ -0,0 +1,22 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+  state: {
+    user: {}
+  },
+
+  actions: {
+    userLogged ({commit}, user) {
+      commit('USER_LOGGED', user)
+    }
+  },
+
+  mutations: {
+    USER_LOGGED (state, user) {
+      state.user = user
+    }
+  },
+});
diff --git a/template_src/src/main.js b/template_src/src/main.js
@@ -25,6 +25,9 @@ import app from './main.vue'
 // Import Routes
 import routes from './routes.js'
 
+// Import Vuex Storage
+import store from './assets/vuex/storage.js'
+
 // Install Plugin
 Vue.use(Framework7Vue, Framework7);
 
@@ -37,6 +40,7 @@ if (document.location.search.indexOf('theme=') >= 0) {
 export default new Vue({
   // Root Element
   el: '#app',
+  store,
   render: c => c('app'),
   components: {
     app,

diff --git a/template_src/src/routes.js b/template_src/src/routes.js
@@ -27,4 +27,8 @@ export default [
     path: '/chat/',
     component: require('./assets/vue/pages/chat.vue')
   },
+  {
+    path: '/vuex/',
+    component: require('./assets/vue/pages/vuex.vue')
+  },
 ]
diff --git a/template_src/webpack.config.js b/template_src/webpack.config.js
@@ -42,8 +42,8 @@ let config = function (env) {
         {test: /\.svg$/, loader: 'url-loader'},
         {test: /\.scss$/, loader: [ 'vue-style-loader', 'css-loader', 'sass-loader']},
         {test: /\.sass$/, loader: [ 'vue-style-loader', 'css-loader', 'sass-loader?indentedSyntax']},
-        {test: /\.vue$/, loader: 'vue-loader', options: {loaders: {js: {loader: 'babel-loader', options: {presets: ['env']}}}}},
-        {test: /\.js$/, exclude: /node_modules\/(?!(framework7|framework7-vue|template7|dom7)\/).*/, use: {loader: 'babel-loader', options: {presets: ['env'], plugins: [ 'transform-runtime' ]}}}
+        {test: /\.vue$/, loader: 'vue-loader', options: {loaders: {js: {loader: 'babel-loader', options: {presets: ['env'], plugins: ['transform-object-rest-spread']}}}}},
+        {test: /\.js$/, exclude: /node_modules\/(?!(framework7|framework7-vue|template7|dom7)\/).*/, use: {loader: 'babel-loader', options: {presets: ['env'], plugins: [ 'transform-runtime', 'transform-object-rest-spread' ]}}}
       ]
     },