# 章節引導
*****
[TOC]
# 1. vuex是什么
github站點: https://github.com/vuejs/vuex
在線文檔: https://vuex.vuejs.org/zh-cn/
簡單來說: 對應用中組件的狀態進行集中式的管理(讀/寫)
# 2. 狀態自管理應用
state: 驅動應用的數據源
view: 以聲明方式將state映射到視圖
actions: 響應在view上的用戶輸入導致的狀態變化(包含n個更新狀態的方法)
# 3. 多組件共享狀態的問題
多個視圖依賴于同一狀態
來自不同視圖的行為需要變更同一狀態
以前的解決辦法
* 將數據以及操作數據的行為都定義在父組件
* 將數據以及操作數據的行為傳遞給需要的各個子組件(有可能需要多級傳遞)
vuex就是用來解決這個問題的
# 4. vuex的核心概念
## 1). state
vuex管理的狀態對象
它應該是唯一的
const state = {
xxx: initValue
}
## 2). mutations
包含多個直接更新state的方法(回調函數)的對象
誰來觸發: action中的commit('mutation名稱')
只能包含同步的代碼, 不能寫異步代碼
const mutations = {
yyy (state, data) {
// 更新state的某個屬性
}
}
## 3). actions
包含多個事件回調函數的對象
通過執行: commit()來觸發mutation的調用, 間接更新state
誰來觸發: 組件中: $store.dispatch('action名稱') // 'zzz'
可以包含異步代碼(定時器, ajax)
const actions = {
zzz ({commit, state}, data1) {
commit('yyy', data2)
}
}
## 4). getters
包含多個計算屬性(get)的對象
誰來讀取: 組件中: $store.getters.xxx
const getters = {
mmm (state) {
return ...
}
}
## 5). modules
包含多個module
一個module是一個store的配置對象
與一個組件(包含有共享數據)對應
## 6). 向外暴露store對象
export default new Vuex.Store({
state,
mutations,
actions,
getters
})
## 7). 組件中:
import {mapGetters, mapActions} from 'vuex'
export default {
computed: mapGetters(['mmm'])
methods: mapActions(['zzz'])
}
{{mmm}} @click="zzz(data)"
## 8). 映射store
import store from './store'
new Vue({
store
})
## 9). store對象
1.所有用vuex管理的組件中都多了一個屬性$store, 它就是一個store對象
2.屬性:
state: 注冊的state對象
getters: 注冊的getters對象
3.方法:
dispatch(actionName, data): 分發action
# 5. 將vuex引到項目中
## 1). 下載: npm install vuex --save
## 2). 使用vuex
1.store.js
import Vuex from 'vuex'
export default new Vuex.Store({
state,
mutations,
actions,
getters,
modules
})
2.main.js
import store from './store.js'
new Vue({
store
})
- 前言
- 你真的懂This嗎?
- 對象和對象構造函數
- 工廠功能和模塊模式
- API的使用
- async and await
- 關于async的很棒的一篇文章
- 掘金:關于forEach,map,fiter循環操作
- Node.js 實例與基礎
- 原創: Express 學習使用筆記
- 零碎知識點方法
- 關于滾動吸頂的方法
- Vue學習筆記
- Vue向導
- vuex是啥?
- vue代碼風格指南
- 關于vue的初體驗
- 超詳細解毒Vue
- Vue實例
- 模版語言
- 組件基礎
- 條件渲染、列表渲染、Class與style綁定
- Todolist的制作超詳細
- vue-router
- Vue基礎2.0x 筆記
- 搭建vuepress
- JavaScript之ES6
- 箭頭函數
- 這就是This