fix(vuex): dispatch action(#SimulatedGREG/electron-vue#733)

src/main/index.js

@@ -1,6 +1,7 @@
 'use strict'
 
-import { app, BrowserWindow, globalShortcut, clipboard } from 'electron'
+import { app, BrowserWindow, globalShortcut } from 'electron'
+import '../renderer/store'
 
 /**
  * Set `__static` path to static files in production

src/renderer/App.vue

@@ -5,29 +5,33 @@
 </template>
 
 <script>
-  export default {
-    name: 'my-electron',
-    mounted () {
-      var filePath = this.$electron.clipboard.read('public.file-url').replace('file://', '')
-      console.log('filePath ' + filePath)
-      // this.$electron.globalShortcut.register('cmd+option+l', function () {
-      //   var filePath = this.$electron.clipboard.read('public.file-url').replace('file://', '')
-      //   console.log('filePath ' + filePath)
-      // })
-      // e.globalShortcut.register('cmd+option+l', function () {
-      //   var filePath = this.$electron.clipboard.read('public.file-url').replace('file://', '')
-      //   console.log('filePath ' + filePath)
-      // })
-
-      this.$electron.ipcRenderer.on('synchronous-message', (event, args) => {
-        console.log('recevie' + args)
-        this.$router.push('confirm')
-        // this.$router.push({ name: 'confirm-page', params: { : '123' }})
-      })
-    }
+export default {
+  name: 'my-electron',
+  created () {
+    console.log('created app')
+    this.$electron.ipcRenderer.on('synchronous-message', (event, args) => {
+      console.log('recevie' + args)
+      // this.$store.commit('CHANGE_IMG_URL')
+      this.$router.push('confirm')
+      // this.$router.push({ name: 'confirm-page', params: { : '123' }})
+    })
+  },
+  mounted () {
+    var filePath = this.$electron.clipboard.read('public.file-url').replace('file://', '')
+    console.log('filePath ' + filePath)
+    this.$store.dispatch('nice')
+    // this.$electron.globalShortcut.register('cmd+option+l', function () {
+    //   var filePath = this.$electron.clipboard.read('public.file-url').replace('file://', '')
+    //   console.log('filePath ' + filePath)
+    // })
+    // e.globalShortcut.register('cmd+option+l', function () {
+    //   var filePath = this.$electron.clipboard.read('public.file-url').replace('file://', '')
+    //   console.log('filePath ' + filePath)
+    // })
   }
+}
 </script>
 
 <style>
-  /* CSS */
+/* CSS */
 </style>

src/renderer/components/ConfirmPage.vue

@@ -1,59 +1,83 @@
 <template>
   <div>
-    <div class="title">Information</div>
-    <input id="input" />
+    <!-- <div class="title">Information</div> -->
+    <div class="title">{{imgUrl}}1{{main}}</div>
+    <input id="input"
+           value=""
+           @keydown="handleKeyDown" />
+
   </div>
 </template>
 
 <script>
-  export default {
-    name: 'confirm-page',
-    mounted () {
-      console.log('mounted confirm page')
-    },
-    beforeUpdate () {
-      console.log('before update confirm page')
-    },
-    beforeRouteEnter (to, from, next) {
-      console.log('entered')
-      next()
+export default {
+  name: 'confirm-page',
+  mounted () {
+    console.log('mounted confirm page')
+    this.$store.dispatch('ConfirmPage/changeImgUrl',
+      { imgUrl: 'https://baidu.com' })
+  },
+  beforeUpdate () {
+    console.log('before update confirm page')
+  },
+  beforeRouteEnter (to, from, next) {
+    console.log('entered')
+    next(vm => {
+      vm.$store.dispatch('changeImgUrl', { imgUrl: 'https://baidu.com' })
+    })
+  },
+  computed: {
+    imgUrl: function () {
+      return this.$store.state.ConfirmPage.imgUrl
     },
-    data () {
-      return {
-        electron: process.versions.electron,
-        name: this.$route.name,
-        node: process.versions.node,
-        path: this.$route.path,
-        platform: require('os').platform(),
-        vue: require('vue/package.json').version
-      }
+    main: function () {
+      return this.$store.state.Counter.main
+    }
+  },
+  methods: {
+    handleKeyDown: function () {
+      console.log('oooo')
+      this.$store.dispatch('changeImgUrlsssss')
+    }
+  },
+  data () {
+    return {
+      electron: process.versions.electron,
+      name: this.$route.name,
+      node: process.versions.node,
+      path: this.$route.path,
+      platform: require('os').platform(),
+      vue: require('vue/package.json').version
     }
   }
+}
 </script>
 
 <style scoped>
-  .title {
-    color: #888;
-    font-size: 18px;
-    font-weight: initial;
-    letter-spacing: .25px;
-    margin-top: 10px;
-  }
+.title {
+  color: #888;
+  font-size: 18px;
+  font-weight: initial;
+  letter-spacing: 0.25px;
+  margin-top: 10px;
+}
 
-  .items { margin-top: 8px; }
+.items {
+  margin-top: 8px;
+}
 
-  .item {
-    display: flex;
-    margin-bottom: 6px;
-  }
+.item {
+  display: flex;
+  margin-bottom: 6px;
+}
 
-  .item .name {
-    color: #6a6a6a;
-    margin-right: 6px;
-  }
+.item .name {
+  color: #6a6a6a;
+  margin-right: 6px;
+}
 
-  .item .value {
-    color: #35495e;
-    font-weight: bold;
-  }
+.item .value {
+  color: #35495e;
+  font-weight: bold;
+}
 </style>

src/renderer/components/LandingPage/SystemInformation.vue

@@ -31,43 +31,45 @@
 </template>
 
 <script>
-  export default {
-    data () {
-      return {
-        electron: process.versions.electron,
-        name: this.$route.name,
-        node: process.versions.node,
-        path: this.$route.path,
-        platform: require('os').platform(),
-        vue: require('vue/package.json').version
-      }
+export default {
+  data () {
+    return {
+      electron: process.versions.electron,
+      name: this.$route.name,
+      node: process.versions.node,
+      path: this.$route.path,
+      platform: require('os').platform(),
+      vue: require('vue/package.json').version
     }
   }
+}
 </script>
 
 <style scoped>
-  .title {
-    color: #888;
-    font-size: 18px;
-    font-weight: initial;
-    letter-spacing: .25px;
-    margin-top: 10px;
-  }
+.title {
+  color: #888;
+  font-size: 18px;
+  font-weight: initial;
+  letter-spacing: 0.25px;
+  margin-top: 10px;
+}
 
-  .items { margin-top: 8px; }
+.items {
+  margin-top: 8px;
+}
 
-  .item {
-    display: flex;
-    margin-bottom: 6px;
-  }
+.item {
+  display: flex;
+  margin-bottom: 6px;
+}
 
-  .item .name {
-    color: #6a6a6a;
-    margin-right: 6px;
-  }
+.item .name {
+  color: #6a6a6a;
+  margin-right: 6px;
+}
 
-  .item .value {
-    color: #35495e;
-    font-weight: bold;
-  }
+.item .value {
+  color: #35495e;
+  font-weight: bold;
+}
 </style>

src/renderer/main.js

@@ -14,6 +14,7 @@ Vue.config.productionTip = false
 //   console.log('nice')
 // })
 /* eslint-disable no-new */
+store.dispatch('nice')
 new Vue({
   components: { App },
   router,

src/renderer/store/index.js

@@ -9,9 +9,6 @@ Vue.use(Vuex)
 
 export default new Vuex.Store({
   modules,
-  plugins: [
-    createPersistedState(),
-    createSharedMutations()
-  ],
+  plugins: [createPersistedState(), createSharedMutations()],
   strict: process.env.NODE_ENV !== 'production'
 })

src/renderer/store/modules/ConfirmPage.js

@@ -0,0 +1,24 @@
+const state = {
+  imgUrl: 'https://aliook'
+}
+
+const mutations = {
+  CHANGE_IMG_URL (state, payload) {
+    console.log('mutations log')
+    state.imgUrl = 'ok'
+  }
+}
+
+const actions = {
+  changeImgUrl ({ commit }, payload) {
+    // do something async
+    console.log('aaaaa')
+    commit('CHANGE_IMG_URL', payload)
+  }
+}
+
+export default {
+  state,
+  mutations,
+  actions
+}

src/renderer/store/modules/Counter.js

@@ -12,9 +12,13 @@ const mutations = {
 }
 
 const actions = {
-  someAsyncTask ({ commit }) {
+  add ({ commit }) {
     // do something async
+    console.log('aaaa')
     commit('INCREMENT_MAIN_COUNTER')
+  },
+  nice ({ commit }) {
+    console.log('nice')
   }
 }