狀態管理(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...