學習vue基礎知識(二)

2022-07-15 02:54:12 字數 989 閱讀 4103

全域性狀態管理

多元件共享狀態 多個元件使用同乙個資料

任何乙個元件發生改變 其他的元件也要跟著發生相應的變化

建立全域性狀態管理的例項

註冊在元件裡使用全域性狀態值 a.獲取渲染全域性狀態值b.修改全域性狀態值

5大核心

state 全域性狀態資料mutation 規定只有mutation才能修改state 通過commit方法觸發action 可以放非同步操作 觸發mutation 通過dispatch 觸發getter vuex裡的計算屬性 和state值進行關聯 state發生改變可以重新計算,並且可以在頁面上直接使用

action 存放非同步

統一管理非同步請求減少**量

時間旅行更加準確 vue的開發者工具

vue開發者工具

開發者工具綠了 該網頁一定是vue做的vue做的網頁開發者工具不一定綠

最簡版元件裡通過 $store.state 獲取全域性狀態資料進行渲染

通過 $store.commit 方法觸發mutation 修改全域性狀態值 整個頁面都會變

模組化模組化之後state的取值需要新增一級模組名 其他的三個核心不變

可以在模組裡新增命名空間 作用就是在 mutation getters actions的名字前面 新增模組名用處就是防止名字衝突

稍微複雜版

元件裡通過 $store.state 獲取全域性狀態資料進行渲染

通過 $store.dispath方法 觸發action裡的方法

action 觸發mutation進行修改全域性狀態值

輔助函式

幫助我們減少**量

值型別向計算屬性對映

mapstate 將全域性狀態管理的state值對映到使用組價的計算屬性mapgetters 將全域性狀態管理的getters值對映到使用組價的計算屬性

函式型別向methods進行對映

mapmutations 將mutation的值對映到 方法裡mapactions 將actions裡的值對映到方法。

vue學習(基礎知識)

下面是新增元件的兩種方式 申明方法和變數,並進行應用。命令 config index.js package.json 專案資訊 使用vue之前需要先安裝nodejs。參考 在cmd中使用以下命令 npm install g vue cli 安裝腳手架 npm run dev 在demo資料夾下使用該...

Vue基礎知識學習(後端)

vue安裝 直接引用cdn npm安裝 構建大型應用使用,在這不用 命令列工具 構建大型單頁應用,在這不用 vue基本 結構 指令1 v text,v html,顯示文字內容 區別 v html中的資料原樣顯示 v html中的資料可能會被轉義,比如會被當成html 指令2 v on,繫結事件指令 ...

學習vue基礎知識(四)

將同乙個事件迴圈內的所有資料操作進行和並 然後統一更新並不是資料修改一次就更新一次 自動執行引入模組內部的install方法install 方法一般做的是全域性註冊元件 v model 使用場景 1.表單元素上 2.元件上在元件使用v model 提供可乙個叫 value 自定義屬性 提供了乙個叫 ...