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,更多是记录一下如何使用.