At the forefront of

Recently in project development, once again met wonderful work in the online to demand, let small make up feel very disgusting, really is a good product is very important, otherwise the suffering is always a programmer, wish friends don’t meet this always online the requirements and work overtime of time also said in the delay time, absolutely terrible, bala bala, ah, not much said, get into the business. When I need to modify this time, I just need to use vuex warehouse storage, and I found that there are still many pits in it. The principle of VUex storage is stored in JS memory, so this will lead to the disappearance of stored content when refreshing the page again. After a long time of trouble, I will help my friends who encounter the same pits.

The solution is to combine VUex with JS localStroge storage. In this way, vuex is not useful. Hopefully, it can be updated.

1. First, let’s talk briefly about the principle of VUEX.

Vuex is a reactive state management mode, which is much easier than building a direct value transfer, but it still doesn’t use subtlety because of that flaw. Take a look at how vuex works

Step 1: Now create an index.js file in the Store folder to export and output your own stored variables and states. import Vue from'vue'
import Vuex from 'vuex'
import app from './modules/app'
import user from './modules/user'
import permission from './modules/permission'
import fundGetters from './modules/fundGetters'
import fundComparsionCodeList from './modules/fundComparsionCodeList'
import getters from './getters'

Vue.use(Vuex)

const store = new Vuex.Store({
    modules: {
        app,
        user,
        permission,
        fundGetters,
        fundComparsionCodeList
    },
    getters
})

exportConst getters = {sidebar: open a getter.js file that contains the variables that you want to export to state state => state.app.sidebar, token: state => state.user.token, mobile: state => state.user.mobile, institutionGuid: state => state.user.institutionGuid, avatar: state => state.user.avatar, ip: state => state.user.ip, userTodoActions: state => state.user.userTodoActions, invObj: state => state.user.invObj, roleGuid: state => state.user.roleGuid, permissionList: state => state.user.permissionList, permissionMap: state => state.user.permissionMap, permissionRouters: state => state.permission.routers, permission_routers: state => state.permission.routers, addRouters: state => state.permission.addRouters, permissionMenus: state => state.user.permissionMenus, FundTypes: state => state.user.FundTypes, userGuid: state => state.user.guid, fundCodeList: state => state.fundGetters.fundCodeList, fundComparsionList: state => state.fundComparsionCodeList.fundComparsionList }exportConst fundComparsionCodeList = {state: fundComparsionCodeList = {state: fundComparsionCodeList = {state: {fundComparsionList: []}, mutations: {// SET_COMPARSION: (state, ComparsionLists) => {state. FundComparsionList = ComparsionLists}, // add ADD_COMPARSION: (state, item) = > {state. FundComparsionList = state. FundComparsionList. Concat (item)}, / / delete DEL_COMPARSION: (state, item) => {for (let i = 0; i < state.fundComparsionList.length; i++) {
                if (state.fundComparsionList[i] === item) {
                    state.fundComparsionList.splice(i, 1)
                    break
                }
            }
        }
    }
}

exportDefault fundComparsionCodeList is used on the page: commit is used to trigger the method in part 3. this.$store.commit("ADD_COMPARSION", this.querycontrastrast); // Since vuex storage is affected by the browser's memory mechanism, this variable is needed when the page is refreshed.$store.getters.fundComparsionList
Copy the code

.2, I think we all have encountered the problemactionandmutationThe difference?

  • 1,mutationIt’s synchronous,actionIs asynchronous
  • 2,mutationYou can change it directlystateThe variables inside, butactionNo,actionCan only be submittedmutation, rather than directly changing the state

3. How do you change and gainstore.stateWhat’s the value inside?

// Change the value this.$store.commit(); // mutation this is submitted.$store.dispatch('setUserinfo',decode); // Distribute the action, or use the mapActions helper function to map the component's methods to a store.dispatch call (by injecting store at the root node first) // value this.$store.getters.setUserinfo
Copy the code

conclusion

At this point, a complete Vuex can be used in its entirety. However, the editor ended up using LocalStroge for storage. I really don’t think it’s a waste. Use the parent component, router-link, and dynamic (router-push) components instead. If there is something wrong, I hope to see more corrections and advice from my friends.