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