Electron-vue簡單整合VUEX

前言

最近在作一個小東西,是基於electron-vue的桌面客戶端工具.因爲本身是一個純種的後端開發,對前端的知識基本還停留在基本JS,JQuery等,因此各位前端大神勿噴~

場景

因爲該項目是一個單頁面的應用,因此須要在登錄後記錄一些狀態信息信息,以便在數據更新的時候,刷新頁面數據.

第一次使用electron和vue,本着越簡單越好的原則,並無太深刻的瞭解vue.瞭解了基本的使用之後就開始了開發.因此,就將但願記錄的信息都寫在了sessionStorage.

這種方式雖然簡單,可是將狀態或者須要傳遞的信息都寫在session中,畢竟是不合理的.後來接觸到了vuex,故在此記錄一下整個使用過程.

什麼是VUEX

Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的全部組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。
上面是官網的介紹,具體的vuex信息,請參閱官網 vuex官網

Electron-Vue整合vuex

1. 前置條件
   該工程是基於electron-vue的cli生成的標準結構工程
2. 在src/store/modules下面添加屬於各自模塊的Store JS文件,本例中定義爲User.js

   

3. 在文件中定義須要記錄state的變量 getters(爲了在頁面中獲取值) mutations

   const state = {
       bucketId: '{bucketId}'    // 默認值
   }
   
   const getters = {
       bucketId: state=> state.bucketId
   }
   
   const mutations = {
       updateBucketId(state, bucketId) {
           state.bucketId = bucketId
       }
   }
   
   export default {
       state,
       mutations
   }

4. 咱們在須要獲取state值的vue文件中,添加以下內容:

   export default {
           computed: {
               bucketId() {
                   return this.$store.state.User.bucketId
               }
           },
       }

   下面是使用變量的方式:

   <span style="float:right">{{ username }}</span>

   注意:其中的User,要和變量所在的文件名相同,其實也就是模塊的名字

5. 更新變量的方式:若是咱們是在vue文件中,直接使用以下方式便可

   this.$store.commit('updateBucketId', response.data[index].bucketId)

   若是咱們要在工具js中使用的話,以下方式

   import store from '../store'
   store.commit('updateBucketId', '1111111')

   截止,electron-vue和vuex的簡單使用就結束了.由於也是實驗和學習性質的demo,更可能是記錄一下如何使用.