vuex狀態管理工具

2021-09-24 13:06:13 字數 2271 閱讀 9627

狀態管理(vuex) store(集中式的儲存管理)

什麼時候用: 打算開發中大型應用

集中式資料管理, 一處修改,多處使用

思維流程:

store.js

this.$store.commit('increment')    -> mutations

this.$store.dispatch('jia') -> actions

mapactions() ->actions mapgetters()->getters

學生 代課老師 校長 財務 班主任 學生

(view)component - dispatch > action -> mutation -> state <- getter <- component

傳送請求 處理 修改狀態

業務邏輯 修改state 讀取state

非同步​ 我們使用一條資料去管理乙個檢視,那麼這個資料我們就稱之為 『狀態』

​ vuex是乙個集中式的儲存管理中心,vuex中可以用來儲存 資料( 狀態 )

​ vuex也是乙個狀態管理中心,它也可以進行狀態的管理

​ 我們使用一條資料去管理乙個檢視,那麼這種管理模式就稱之為 狀態管理

中大型應用使用 (使用的時間)

四個方案:

1. 前: 標準    後: 標準  √

2. 前: 標準 後: 非標準 √

3. 前: 非標準 後: 非標準 √

4. 前: 非標準 後: 標準 √

component ---dispatch---> actions ---commit--->mutations---state <----getters----component

export default 預設匯出乙個

export 叫批量匯出,可以匯出多個

引入store並要在main.js註冊store

import vue from

'vue'

import vuex from

'vuex'

import moviestore from

'./movie'

vue.

use( vuex )

const store =

newvuex.store(}

)export

default store

state.js檔案

定義初始資料

const state =

export

default state

actions.js檔案

獲取資料的方法

import axios from

'axios'

import

*as type from

'./type'

// import from './type'

const actions =)}

).then

( res =>

commit

( action )})

.catch

( error =>)}

,}export

default actions

mutations.js檔案

修改資料

import

*as type from

'./type'

const mutations =

,[ type.

get_more_coming_movies

]( state,action )

}export

default mutations

type.js檔案

定義常量

export

const

get_now_hot_movies

='get_now_hot_movies'

getters.js檔案

獲取新資料

const getters =

,new_more_coming_movies

( state )

}export

default getters

Vuex狀態管理工具的使用

1.vuex 狀態管理模式 2.vuex安裝 3.vuex組成 取資料 this.store.state.num 輔助方法取資料 mapstate num 或者 mapstate 2 actions 非同步請求資料,將請求到的資料在共享狀態裡更新,交給mutations actions非同步請求資料...

Vue 的狀態管理工具 Vuex

前言 複雜元件間的通訊讓人頭疼,於是產生了乙個公共的管理資料的庫 vuex vuex 是乙個專門為 vue.js 應用設計的狀態管理架構,統一管理和維護各個vue元件的可變化狀態 你可以理解成 vue 元件裡的某些 data 五大核心概念 state 基本資料 getters 從基本資料派生的資料 ...

Mobx 狀態管理工具

自己管理,自己總結,知識梳理 start mobx是乙個功能強大,上手非常容易的狀態管理工具。redux的作者也曾經向大家推薦過它,在不少情況下可以使用mobx來替代掉redux。mobx流程圖要特別注意當使用mobx react時可以定義乙個新的生命週期鉤子函式componentwillreact...