Vue this.$store.state.xx.xx

this.$store.state.xx.xx 其實(shí)是Vue用到狀態(tài)管理工具Vuex

Vuex官網(wǎng)：https://vuex.vuejs.org/zh/

感覺就是把組件的共享狀態(tài)抽取出來，以一個(gè)全局單例模式管理。在這種模式下，我們的組件樹構(gòu)成了一個(gè)巨大的“視圖”，不管在樹的哪個(gè)位置，任何組件都能獲取狀態(tài)或者觸發(fā)行為?。ㄔ陧?xiàng)目的任意地方都可以隨時(shí)獲取和動(dòng)態(tài)的修改，在修改之后，vue會(huì)為你的整個(gè)項(xiàng)目做更新）

獲取store中的數(shù)據(jù)

在vue根文件中注冊store，這樣所有的組件都可以使用store中的數(shù)據(jù)了

我的項(xiàng)目文件結(jié)構(gòu)

在main.js文件中注冊store

然后代碼中寫到

登錄后前端有緩存userId，然后通過userId再去查找

這個(gè)位子就用到了 公共頁面里面的

總結(jié)：main.js是工會(huì)老大，你把獎(jiǎng)勵(lì)給了老大，老大有的道具會(huì)交給你使用，那么你就可以通過this來使用。

vue項(xiàng)目都在什么時(shí)候用store.state、$store.state和this.$store.s

store 和 [this.]$store

簡單來說，如果你在根組件下注入了store那么所有的.vue文件里使用就可以直接用 this.$store.xxxx

Vue官網(wǎng)：為了在 Vue 組件中訪問 this.$store.property，你需要為 Vue 實(shí)例提供創(chuàng)建好的 store。Vuex 提供了一個(gè)從根組件向所有子組件，以 store 選項(xiàng)的方式“注入”該 store 的機(jī)制

//main.js
import store from './store'
new Vue({
  el: '#app',
  store, //根組件注入store
})

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

而在js文件里面如果想要使用store，就必須先引入import store from '@/store'然后使用store.xxx，因?yàn)閖s里面是打印不出來this.$store的

//  src/test.js文件
import store from './store/';
console.log(store)
console.log(this) // undefined
console.log(this.$store) // 會(huì)報(bào)錯(cuò)

this.$store 和 $store

$store 是掛載在 Vue 實(shí)例上的（即Vue.prototype），而組件也其實(shí)是一個(gè)Vue實(shí)例，在組件中可使用this訪問原型上的屬性

<template> 擁有組件實(shí)例的上下文，可直接通過 {{$store.state.XXX }} 訪問，等價(jià)于 script 中的 this.$store.state.XXX

就把 $store 看成在data中return的某個(gè)變量，在下面的script中使用需要加this，在上面的template中不需要加this

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評論