vue-01

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
    })