Detailed descriptions of Vuex management logon status and vuex management logon status

Detailed descriptions of Vuex management logon status and vuex management logon status

I read the vuex document carefully, but it is still in the fog in the cloud, but at least I understand that it is a dedicated management status, which can drive view update based on changes in data status, in this case, at least login registration is in a state, so you can use login for testing and learning vuex. However, since the status is managed, I should at least elaborate on the state logic of this learn learning project.

1. It is said that the status in the stored vuex store is temporary. Right-click to refresh the page and the status will be destroyed (this is said to have been difficult for me to confirm ), in this case, the user status of my user should still be written to sessionStorage. Otherwise, the user will not be logged on after a refresh page, and the user will not be crazy. Therefore, the user status in the store should be read from sessionStorage.

2. In the current pages of this learn project, home, paroducts, FAQ, login, and regin should be accessible without logon, however, sub-pages below manger and manger must be accessed only after logon.

3. login and regin are special. if the user has logged on to the two pages, it is also possible in principle. However, if the user has logged on, if another account is used to log on again, it is unreasonable for sessionStorage to have two user data records. Therefore, it should be stipulated that if the user has logged on, he or she will access login or regin again, remove user Data from sessionStorage first.

4. vuex stipulates that all state changes can only rely on mutation, but only action is required to drive mutation to change the state. The logon status changes in this project only involve logon, registration, and logout. When Logon and registration are successful, you must execute an action with a user, when logging out, execute an action that does not have a user.

5. The vuex official also mentioned a getter. I feel that when we need to use the status in the store, it should be exactly after we retrieve the status, some processing changes should be made to this State, and only getter can be used once. If it is too much, it will be messy (I don't know if this idea is correct), but I can see this method. $ store. getters. doneTodosCount, I think it should be more than once. It is estimated that I think a little more, and it does not seem to be available now. I may have to go through the necessary application scenarios before I can fully understand them.

6. There is another module. This is a bit confusing. I don't know much about it. I don't care about it first.

In the expectation, the login status of the store still needs to be obtained from sessionStorage, so I should first constrain the routing, and those pages need users, those do not need to, access those pages need to remove users

Open main. js

Add code

// The official name is "navigation guard", which is quite a router. beforeEach (to, from, next) =>{// if you are logging on or registering, remove the user first if (. path = '/login' |. path = '/regin') {sessionStorage. removeItem ('user')} let user = JSON. parse (sessionStorage. getItem ('user') if (! User & (. path = '/manger/my' |. path = '/manger/send' |. path = '/manger/history') {next ({path: '/login'})} else {next ()}})

It seems strange to write this way. Do you know if there is a simple way to write it?

However, the desired effect can be achieved.

Then try to write the store

Write a basic structure first

Then, write the code step by step.

Is this a function required?

Hey, no, I'm stupid. This is a value assignment (I don't know if the value assignment is accurate). It's not an obj object, and you don't need a comma.

Store. js

Import Vue from 'vue 'import Vuex from 'vuex' vue. use (Vuex) // create basic status const state = {// The logon status is not logged on to logined: false, // user information data. Currently, you only need avatar and name, add username to LoginedUser: {name: '', avatar:'', username: ''} // create the change state method const mutations = {// The change state method also requires two, one is logged on or registered, one is logout. // The Arrow function cannot be written here ??? // Log on to LOGIN (state) {// first change the logon status to the logged on state. logined = true // then use sessionStorage to retrieve user data. let user = JSON. parse (sessionStorage. getItem ('user') // sends the user data to the state. loginedUser. name = user. name state. loginedUser. avatar = user. avatar state. loginedUser. username = user. username}, // log out of LOGOUT (state) {// This is the same as the state. logined = false state. loginedUser. name = ''state. loginedUser. avatar = ''state. loginedUser. username = ''} // create the driver actions so that mutations can start const actions ={// here, a LOGIN driver is called login. // This context is officially written., login (context) {context. commit ('login')}, // same logout (context) {context. commit ('logout')} export default new Vuex. store ({state, mutations, actions })

I think that's all right. I 'd like to test it.

Otherwise, the action should be mounted to the place where the action is mounted, and the store data should be referenced in the place where the store status is referenced.

Log on to the page and choose action.

This should be the case. Registration is the same.

Then the logout page

Header. vue

At the same time, we will not retrieve data from sessionStorage when creating the page.

There is also a main. js

If it cannot be in main. it is really troublesome to take effect in js. Just think about it. The logged-on user directly went to the/login page, and the user data in seeionStorage was cleared, but the data in the store was not updated, isn't there a head portrait ???

There is also a step to get the data in the store

Header. vue

Test it now.

Crying... Four Errors

I wrote this according to the official saying.

 

Comment out the data of header. vue and make an error.

But what does this dispatch mean by "undefined"? I wrote it. I want to help you solve this problem.

Changing dispatch to context does not work.

Change to commit. Try again.

I still have no temper. Let me check the information again.

Some problems have been solved after research for a long time

First, I wrote the action in store. js as follows:

But I don't think the original method is correct.

Then comment out this sentence in main. js.

Then it's normal. dispatch is correct, so what I'm worried about happened.

Log on first

You can see that the user information is immediately displayed in the upper-right corner of the header, which meets the requirements. However, if I enter/login in the address bar

I jumped to the login page, but the Avatar is still in the upper right corner ........, it indicates that the data in the store is actually logged on. Although it has no impact on the data, the data will naturally change if he successfully logs on again, generally, no one accesses the logon page like this, but I feel this is wrong.

In addition, I think the distribution of this action should be written in main. js!

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.