SRH vue 對vuex的理解

2022-07-27 08:27:11 字數 2448 閱讀 4294

一.vuex的理解

vuex是一種狀態管理模式,它採用集中式儲存管理應用的所有元件的狀態。

把元件的共享狀態抽取出來,以乙個全域性單例模式管理,在這種模式下,任何元件都能獲取狀態或者觸發行為,使**更結構化,且易維護

使用場景:中大型單頁面開發

二.建立倉庫

每個vuex的應用核心就是store(倉庫),包含著應用中大部分的狀態(屬性)

1. vuex 的狀態儲存是響應式的。當 vue 元件從 store 中讀取狀態的時候,若 store 中的狀態發生變化,那麼相應的元件也會相應地得到高效更新。

2. 你不能直接改變 store 中的狀態。改變 store 中的狀態的唯一途徑就是顯式地提交 (commit) mutation

3.建立store倉庫

引入vue

import vue from "vue";

引入vuex

import vuex from "vuex";

將vuex掛載在vue身上

vue.use(vuex);

//通過vuex建立倉庫,共有5個物件

const store= new vuex.store(

})//匯出倉庫

export default store

三.store的5個物件及作用

1.state:存放的是公共的狀態

元件中訪問公共狀態的兩種方式

1.如果沒有使用輔助函式-------this.$store.state.屬性

2.元件中使用了輔助函式mapstate-------直接使用屬性

(computed中使用)輔助函式----mapstate

2.mutations: 用來修改state的狀態(同步)

該物件下面所有的函式裡面都會有2個引數 乙個是state 另一是params

該方法觸發的時候必須通過commit進行觸發

(methods中使用)輔助函式-----mapmutations

3.actions:用來進行非同步的請求(axios)和業務邏輯的操作

該物件下面所有的函式裡面都會有2個引數

引數1:是乙個物件 物件裡面有commit和state

引數2:需要傳遞的引數

呼叫actions裡面的方法用兩種方式

1.未使用輔助函式--------通過dispatch--this.$store.dispatch("函式",引數)

2.使用輔助函式mapactions--------直接使用函式

(methods中使用)輔助函式--------mapactions

4.getters:當state裡面的狀態發生改變的時候getters裡面的方法就會執行

getters其實就是乙個計算屬性

在getters裡面的每乙個函式中都可以訪問到state

(computed中使用)輔助函式------mapgetters

5.modules:將模組進行分類

modules裡面存放的是一些子模組,store裡面有哪些屬性 子模組中也會有哪些屬性

但是需要注意的一點是:  

1. 在匯出子模組的時候需要加乙個作用域的限制 namespaced=true

2.當訪問子模組裡面的一些方法或者狀態的時候需要加上子模組的名字

例如方法:

handleadd:"tabstore/handleadd";

狀態:message:state=>state.tabstore.message

輔助函式

1.mapstate()

computed:

...vuex.mapstate()

2.mapmutations()

3.mapactions()

methods:

...vuex.mapactions()

4.mapgetters()

computed:

...vuexmapgetters()

vuex資料傳遞的流程

當元件進行資料修改的時候,我們需要呼叫dispatch來觸發actions裡面的方法。(actions裡面用來操作非同步和業務邏輯)actions裡面的每個方法中都會 有乙個commit方法,當方法執行的時候會通過commit來觸發mutations裡面的方法進行資料的修改。 mutations裡面的每個函式都會有乙個state引數,這樣就可以在mutations裡面進行state的資料修改 (mutations

資料的操作是同步的),因為資料是雙向繫結的,當資料修改完畢後,會傳導給頁面。頁面的資料也會發生改變

小菜對vuex的理解

vuex就像乙個無形的倉庫,公共的狀態我們會抽離出來放進裡面。vuex的核心主要包括以下幾個部分 vuex是乙個專為vue服務,用於管理頁面資料狀態 提供統一資料操作的生態系統 如果簡單小型專案,那麼不需要vuex,只需要後者就可以,但是如果中大型,尤其是有許多事件傳播,那麼vuex作用就體現出現了...

我對vuex的理解及其用法

目的 為了非父子元件之間的資料共用。使用方式 一 在src資料夾下新建乙個store.js檔案 二 將store.js檔案掛載到vue上 在main.js中 import store from store.js 然後在new vue中的物件中加入store 三 store.js中的操作 引入vue和...

自己對vuex 和 redux的理解

1.毫無以疑問都是用了設計模式中的 觀察者模式 或者說 發布 訂閱模式 2.發布訂閱模式 需要有 事件物件event 事件物件有 listen 訂閱 trigger 發布訊息 remove 取消訂閱 等屬性 3.在vuex中,vue.store 相當於event物件,store.commit 相當於...