Display the user's login phone number in the page and replace the following code in the header.vue component.

<span class="el-dropdown-link">
              <img src="http://157.122.54.189:9095/assets/images/avatar.jpg" alt="">
              {{this.$store.state.user.userInfo.user.username}}
              <i class="el-icon-arrow-down el-icon--right"></i>
</span>

The use of store under nuxt

1. First, create a new module of data, a module is a file, the name of the file is the name of the module, such as a new user module, each module can expose three commonly used attributes.

• state
• mutations
• actions

// Every small warehouse must be exposed. state, mutations

export const state = {
  userInfo: {
    // User-authenticated token
    token: "",
    // User Information
    user: {

    }
    
  }
}

export const mutations = {
  // Setting User Information
  setUserInfo(state, data){
    state.userInfo = data;
  }
}

2. Read the user below user

{{ $store.state.user.userInfo.user.username }} 

3. The method under mutations must be called with the module name

// 1.Save to vuex
this.$store.commit("user/setUserInfo", res.data);

Store store data locally

Because this project is a Node.js project, you can't use the localStorage method to store it. Here you need to install a plug-in to solve this local storage problem.

Plug-in Address: https://github.com/robinvdvleuten/vuex-persistedstate

Installation dependency

Installation: yarn add vuex-persisted state

Configure nuxt.config.js and add the following configuration in plugins.

{ src: '~/plugins/localStorage.js', ssr: false }

Create a new localStorage.js in the plugins directory and add the following code.

// ~/plugins/localStorage.js

import createPersistedState from 'vuex-persistedstate'

export default ({store}) => {
  window.onNuxtReady(() => {
    createPersistedState({
        key: 'store'
    })(store)
  })
}

Using a third-party plug-in vuex-persisted state, store data is automatically saved to the local store through this plug-in, and local data is automatically reassigned to the store after the application is loaded.

3. Judging Display Page Information

When the locally saved data is cleared, the page will still display the avatar. The "Log in/Register" button should be displayed, and the following code can be modified.

<div>
        <div v-if="!$store.state.user.userInfo.token">
          <nuxt-link to="/user/login">Sign in / register</nuxt-link>
        </div>
        <div v-else>
          <el-dropdown>
            <span class="el-dropdown-link">
              <img
                :src="$axios.defaults.baseURL + $store.state.user.userInfo.user.defaultAvatar"
                alt
              />
              {{this.$store.state.user.userInfo.user.username}}
              <i
                class="el-icon-arrow-down el-icon--right"
              ></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>Personal Center</el-dropdown-item>
              <el-dropdown-item>Sign out</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>

4. Log out

Add an exit event to the exit button in the header.vue component

<! - Binding native events to elementUI components via native - >
<el-dropdown-item@click.native="handleLogout">exit </el-dropdown-item>

  methods: {
    // Log out and empty local user data
    handleLogout(){
      this.$store.commit('user/clearUserInfo');
    }
  }

Add a method to empty data in mutations of store/user.js module.

  // Set user data to null
  clearUserInfo(state){
    state.userInfo = {};
  }

After successful login, jump to the home page and add the following code in loginForm.vue.

// Jump to Home Page
this.$router.push("/");

5. Use of actions

actions are asynchronous modified warehouse data and rely on mutations.

mutations: Used to synchronously modify warehouse data.

actions: Used to modify warehouse data asynchronously, such as login.

Write the code to send the login request into the actions method for easy maintenance and invocation.

Add actions in store/user.js.

// Asynchronous Modification of Warehouse Data
export const actions = {
  // login(store, data){
  login({commit}, data){
    return this.$axios({
      url: "/accounts/login",
      method: "POST",
      data:data
    }).then(res => {
      // store.commit("setUserInfo", res.data)
      commit("setUserInfo", res.data)
      // 1.Save to vuex, Note the addition of namespaces when calling methods,That's the module where the method is located. user

      // The behavior after login should be executed by the calling page, which cannot be written to death, because the successful login operation of each page may be different.
      // this.$router.push("/");
      
    });
  }
}

In the loginForm.vue component, the code for the method of sending login requests is changed to:

  methods: {
    // Submit login
    handleLoginSubmit() {
      // validate form
      this.$refs["form"].validate(valid => {
        // by true Represents no errors
        if (valid) {
          this.$store.dispatch('user/login', this.form).then(res=>{
            this.$router.push('/');
          })
        }
      });
    }
  }

Action Summary

Under what circumstances can methods be encapsulated into actions?

When asynchronous methods need to be reused, consider encapsulating methods into actions, such as login.

How should actions be declared?

The first parameter of the method in actions is the store object, under which all store attributes (commit, dispatch, state...) can be accessed to modify state data with commit.

The second is optional, which is the parameter passed in.

How do I call the actions method?

this.$store.dispatch('user/login', this.form).then(res=>{ this.$router.push('/'); })

store summary

When will Vuex be used?

There is a lot of project data, and when multiple components are needed to share data, vuex can be used.

How do you use it?

state: Storing data

mutations: Setting up data to modify state

Action: Modify state data asynchronously and put reusable requests into actions (actions need to call mutations to modify data)

Problems to be noticed when using

Don't Write Wrong Words

Note that methods calling mutations and actions remember to add module names (namespaces)

Posted by tempa on Mon, 15 Jul 2019 15:48:20 -0700