Electron Vue simple integration vuex

Time:2020-5-21

preface

Recently, I am making a small thing, which is a desktop client tool based on electronic Vue. As I am a pure back-end development, my knowledge of the front-end is still basic JS, jQuery, etc., so don’t spray on the front-end gods~

scene

As the project is a single page application, it is necessary to record some status information after logging in, so as to refresh the page data when the data is updated

The first time you use electronic and Vue, you don’t have a deep understanding of Vue based on the principle that the simpler the better. After you understand the basic use, you start to develop. So, you write all the information you want to record in sessionstorage

Although this method is simple, it is unreasonable to write the state or the information to be transmitted in the session after all. Later, I came into contact with vuex, so I will record the whole use process here

What is vuex

Vuex is a Vue.js State management mode of application development. It uses centralized storage to manage the state of all components of the application, and ensures that the state changes in a predictable way with corresponding rules.
The above is the introduction of the official website. Please refer to the official website of vuex for specific information

Electron Vue integration vuex

  1. Preconditions
    This project is a standard structural engineering based on the CLI generation of electron Vue
  2. Under Src / store / modules, add the store JS file belonging to the respective module. In this case, it is defined as User.js

    Electron Vue simple integration vuex

  3. Define variables getters (in order to get values in the page) that need to record state in the file

    const state = {
        Bucket ID: '{bucket ID}' // default value
    }
    
    const getters = {
        bucketId: state=> state.bucketId
    }
    
    const mutations = {
        updateBucketId(state, bucketId) {
            state.bucketId = bucketId
        }
    }
    
    export default {
        state,
        mutations
    }
  4. In the Vue file where we need to get the state value, we add the following:

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

    Here’s how to use variables:

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

    Note: the user should be the same as the file name of the variable, which is actually the name of the module

  5. How to update variables: if we are in the Vue file, we can directly use the following methods

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

    If we want to use it in the tool JS, here’s how

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

    As of now, the simple use of electronic Vue and vuex is over. Because it is also an experimental and learning demo, it is more about how to use it