A brief discussion on this.$store.state.xx.xx in Vue

Vue this.$store.state.xx.xx

this.$store.state.xx.xx is actually the state management tool Vuex used by Vue

Vuex official website: https://vuex.vuejs.org/zh/

It feels like extracting the shared state of the components and managing it in a global singleton mode. In this mode, our component tree forms a huge "view", and any component can obtain state or trigger behavior no matter where it is in the tree! (You can access and modify it dynamically at any time anywhere in the project. After the modification, Vue will update your entire project)

Get data from the store

Register the store in the vue root file so that all components can use the data in the store

My project file structure

Register the store in the main.js file

Then the code is written

After logging in, the front end caches the userId, and then searches through the userId

This position is used in the public page

Summary: main.js is the guild boss. You give the reward to the boss, and the boss will give you some props to use, so you can use them through this.

When do Vue projects use store.state, $store.state and this.$store.s

store and [this.]$store

In short, if you inject the store into the root component, you can use this.$store.xxxx directly in all .vue files.

Vue official website: In order to access this.$store.property in a Vue component, you need to provide the created store to the Vue instance. Vuex provides a mechanism to "inject" the store from the root component to all child components as a store option.

//main.js
import store from './store'
new Vue({
  el: '#app',
  store, //root component injection store
})

//index.vue
getData() {
 return {
  userId: this.$store.state.user.userId,
  ......
 }
}

If you want to use store in a js file, you must first import store from '@/store' and then use store.xxx, because this.$store cannot be printed in js.

// src/test.js fileimport store from './store/';
console.log(store)
console.log(this) // undefined
console.log(this.$store) // will report an error 

this.$store and $store

$store is mounted on the Vue instance (i.e. Vue.prototype), and the component is actually a Vue instance. You can use this in the component to access the properties on the prototype.

<template> has the context of the component instance, which can be accessed directly through {{$store.state.XXX }}, which is equivalent to this.$store.state.XXX in the script

Just think of $store as a variable returned in data. You need to add this when using it in the script below, but not in the template above.

The above is my personal experience. I hope it can give you a reference. I also hope that you will support 123WORDPRESS.COM.