Vue學習筆記 十一 Vuex

2022-07-19 06:00:19 字數 1600 閱讀 2037

目錄vuex 是乙個為 vue 應用程式開發的狀態管理模式,它用集中式儲存來管理應用所有元件的狀態

簡單來說,它的作用就是把所有元件的共享狀態抽取出來,以乙個全域性單例的模式進行管理

我們可以把 vuex 理解成乙個 store,裡面儲存著所有元件共享的 state(資料)和 mutations(操作)

(1)通過 cdn 引用

(2)通過 npm 安裝與使用

> npm install vuex
在專案中需要通過vue.use()明確安裝 vuex

import vue from 'vue'

import vuex from 'vuex'

vue.use(vuex)

vuex 中的 state 用於集中儲存資料,當我們需要訪問 state 時,可以先將其對映為計算屬性

由於 state 是響應式的,所以當 state 發生變化時,它會重新求取計算屬性,並自動更新相應的 dom

現在假設我們需要在乙個元件中使用多個 state,如果為每個狀態都寫一條語句將其對映為計算屬性未免太過繁瑣

所以 vuex 提供mapstate()輔助函式能夠幫助我們完成這些工作

vuex 中的 getter 用於管理派生出來的狀態

它就相當於計算屬性一樣,會被快取起來,當依賴發生改變時才會重新計算

和 state 一樣,getters 也有乙個名為mapgetters()的輔助函式將其對映為計算屬性

computed:
如果要給 getter 重新命名,可以用物件形式

computed: )

}

上面我們講了怎麼訪問 state,下面我們來看看怎麼修改 state,改變狀態的唯一方法是提交 mutation

這裡,請記住一條重要的規則:mutation 必須是同步函式

當然,我們也可以使用mapmutations()輔助函式將 mutation 對映為 methods

methods:
也同樣可以使用物件形式支援重新命名

methods: )

}

還記得上面我們說過 mutation 只能是同步函式,若需要使用非同步操作,則可以通過分發 action

action 內部可以包含非同步邏輯,它做的工作是提交 mutation,而不是直接改變狀態

如果需要處理更複雜的非同步邏輯,我們也可以使用 promise 和 async/await

【 閱讀更多 vue 系列文章,請看 vue學習筆記 】

vue學習筆記 vuex

store 倉庫部分 資料儲存 state state 可以顯示的展示資料格式等等,形象理解就是為資料佔位置。思考 在什麼位置可以 顯示的生成資料,除state內以外?獲取資料 getters getters 寫入獲取資料的方法,vuex提供了 filter,find等篩選資料的方法 狀態變更 mu...

Vue學習筆記 Vuex之Getters

getters只有當資料發生改變時才會重新倍計算 類似於計算屬性 需求 1 獲取uers年齡 age 大於18歲的資料 state getters getnum state,getters 需求 2 獲取uers年齡 age 大於18歲資料的數量 getters getnum state,gette...

Vue全家桶 Vuex學習筆記

終於學完了vue vue loader vuex三件套!vuex學習完了記錄筆記如下,是看的b站上的vue入門到實戰和對比著官方文件學習的 npm install s vuex import vuex from vuex import vue from vue vue.use vuex const ...