Vue this.$store.state.xx.xx

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

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

感覺就是把組件的共享狀態(tài)抽取出來，以一個全局單例模式管理。在這種模式下，我們的組件樹構(gòu)成了一個巨大的“視圖”，不管在樹的哪個位置，任何組件都能獲取狀態(tài)或者觸發(fā)行為?。ㄔ陧椖康娜我獾胤蕉伎梢噪S時獲取和動態(tài)的修改，在修改之后，vue會為你的整個項目做更新）

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

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

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

在main.js文件中注冊store

然后代碼中寫到

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

這個位子就用到了 公共頁面里面的

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

vue項目都在什么時候用store.state、$store.state和this.$store.s

store 和 [this.]$store

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

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

//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，因為js里面是打印不出來this.$store的

//  src/test.js文件
import store from './store/';
console.log(store)
console.log(this) // undefined
console.log(this.$store) // 會報錯

this.$store 和 $store

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

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

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

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

最新評論