全域性狀態管理
多元件共享狀態 多個元件使用同乙個資料
任何乙個元件發生改變 其他的元件也要跟著發生相應的變化
建立全域性狀態管理的例項
註冊在元件裡使用全域性狀態值 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 自定義屬性 提供了乙個叫 ...