淺談Vue中的this.$store.state.xx.xx
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根文件中注冊(cè)store，這樣所有的組件都可以使用store中的數(shù)據(jù)了
我的項(xiàng)目文件結(jié)構(gòu)
在main.js文件中注冊(cè)store
然后代碼中寫到
登錄后前端有緩存userId，然后通過userId再去查找
這個(gè)位子就用到了 公共頁(yè)面里面的
總結(jié)：main.js是工會(huì)老大，你把獎(jiǎng)勵(lì)給了老大，老大有的道具會(huì)交給你使用，那么你就可以通過this來使用。
vue項(xiàng)目都在什么時(shí)候用store.state、$store.state和this.$store.s
store 和 [this.]$store
簡(jiǎn)單來說，如果你在根組件下注入了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è)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue的生命周期就是vue實(shí)例從創(chuàng)建到銷毀的全過程,也就是new Vue() 開始就是vue生命周期的開始。Vue 實(shí)例有?個(gè)完整的?命周期,也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模版、掛載Dom -> 渲染、更新 -> 渲染、卸載 等?系列過程,稱這是Vue的?命周期2022-11-11
Element如何實(shí)現(xiàn)loading的方法示例
本文主要介紹了Element如何實(shí)現(xiàn)loading的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
Vue如何設(shè)置滾動(dòng)條自動(dòng)保持到最底端
在開發(fā)中我們常常會(huì)遇到需要讓滾動(dòng)條保持到最底端的需求,比如在開發(fā)一個(gè)聊天框時(shí),請(qǐng)求接口拿到消息列表數(shù)據(jù),展示到前端頁(yè)面時(shí),需要讓滾動(dòng)條自動(dòng)滾到最底端,以此來展示最后的聊天記錄,這篇文章主要介紹了Vue如何設(shè)置滾動(dòng)條自動(dòng)保持到最底端,需要的朋友可以參考下2024-08-08
Vue Echarts實(shí)現(xiàn)圖表的動(dòng)態(tài)適配以及如何優(yōu)化
這篇文章主要介紹了Vue Echarts實(shí)現(xiàn)圖表的動(dòng)態(tài)適配以及如何優(yōu)化，在實(shí)際的前端開發(fā)過程中，動(dòng)態(tài)適配是一個(gè)非常重要的問題，在數(shù)據(jù)可視化的場(chǎng)景下，圖表的動(dòng)態(tài)適配尤為重要，需要的朋友可以參考下2023-05-05
vue-resource post數(shù)據(jù)時(shí)碰到Django csrf問題的解決
這篇文章主要介紹了vue-resource post數(shù)據(jù)時(shí)碰到Django csrf問題的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-03-03
一次在vue中使用post進(jìn)行excel表下載的實(shí)戰(zhàn)記錄
最近遇到了需求,覺著有必要給大家總結(jié)下,這篇文章主要給大家介紹了關(guān)于一次在vue中使用post進(jìn)行excel表下載的實(shí)戰(zhàn)記錄,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
vue使用axios?post發(fā)送json數(shù)據(jù)跨域請(qǐng)求403的解決方案
這篇文章主要介紹了vue使用axios?post發(fā)送json數(shù)據(jù)跨域請(qǐng)求403的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
Vue中使用event的坑及解決event is not defined
這篇文章主要介紹了Vue中使用event的坑及解決event is not defined,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)驗(yàn)證碼功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12
vue 防止頁(yè)面加載時(shí)看到花括號(hào)的解決操作
這篇文章主要介紹了vue 防止頁(yè)面加載時(shí)看到花括號(hào)的解決操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11