系列導航

vue 狀態管理 一、狀態管理概念和基本結構

vue 狀態管理 二、狀態管理的基本使用

vue 狀態管理 三、Mutations和Getters用法

vue 狀態管理 四、Action用法

vue 狀態管理 五、Module用法

一、狀態管理是什麼？

可以簡單的將其看成把需要多個元件共享的變數全部儲存在一個物件裡面。然後，將這個物件放在頂層的Vue例項中，讓其他元件可以使用。

二、 狀態管理圖例

三Vuex核心的概念:

1、State

State單一狀態樹，就是把一些好多元件都需要的變數放到統一的位置定義，變數變更後所有呼叫它的地方資料都會變更。

2、Getters

類似於計算屬性

3、Mutation

store狀態的更新唯一方式：提交Mutation

4、Action

Action類似於Mutation, 但是是用來代替Mutation進行非同步操作的。

5、Module

Module是模組的意思, 為什麼在Vuex中我們要使用模組呢?

Vue使用單一狀態樹,那麼也意味著很多狀態都會交給Vuex來管理.當應用變得非常複雜時,store物件就有可能變得相當臃腫.為了解決這個問題, Vuex允許我們將store分割成模組(Module), 而每個模組擁有自己的state、mutation、action、getters等

後面的章節開始對每個概念進行演示。

四、基本結構

檔案：src/store/index.js

import {createStore} from 'vuex'

export default createStore({

state: {},

mutations: {},

getters: {},

actions: {},

modules: {}

})