Vuex筆記

Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式

Vuex — 狀態管理器，能夠管理你的數據狀態（相似於 React的 Redux）

一個 Vuex 應用的核心是 store（倉庫，一個容器），store包含着應用中大部分的狀態 (state)

Vuex能夠解決不一樣組件之間通訊的問題。好比兩個組件同一級的狀況下，數據能夠進行通訊

簡單的理解：

在state中定義了一個數據以後，能夠在所在項目中的任何一個組件裏進行獲取、修改，而且修改能夠獲得全局的響應變動

Vuex 和單純的全局對象有何不一樣？

　　1）Vuex 的狀態存儲是響應式的

　　　　當 Vue 組件從 store 中讀取狀態的時候，若 store 中的狀態發生變化，那麼相應的組件也會相應地獲得高效更新

　　2）不能直接改變 store 中的狀態

　　　　改變 store 中的狀態的惟一途徑就是顯式地提交 (commit) mutation，方便咱們跟蹤每個狀態的變化

Vuex應用場景：

適用於中大型單頁應用

複雜的頁面，一個數據多個頁面或路由共享（互相交互），多層級數據交互。

 

min.js文件

import Vue from 'vue'//引入vue依賴
import App from './App.vue'//引入APP主組件
import Store from './store/store'//引入store狀態管理

//建立一個vue實例
new Vue({
    render:h => h(App),//渲染App組件
    store//將store倉庫掛載Vue實例上
}).$mount('#app')

 

在store文件夾下建立一個store.js

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);//經過use使用Vuex

new Vuex.Store({
    //方法裏面傳個對象
    //初始化狀態的數據
    //當改變state時候就會改變試圖

})
const state = {
    num: 0
}
const mutations = {
    add(state){
        state.num +=1;
    }
}
export default new Vuex.Store({
    store,
    mutations
})

 

使用vuex的步驟

一、安裝

npm install vuex --save

二、引包（store文件夾 store.js下）

引入vue 和 vuex
//import Vue from 'vue';
//import Vuex from 'vuex';

三、use使用

Vue.use(Vuex)

四、new Vuex.Store實例

new Vuex.Store({
/*
    想要哪些數據被全部組件直接拿到
    就把這個數據放在state下
*/
    state:{
        //初始化的狀態
    },
    mutations:{
        //改變數據的方法
        add(state){//傳入state初始化狀態
            此處爲改變state.xx數據的代碼
        }
        //括號內爲mutations中函數名，能夠跟若干參數
        this.$store.commit(add)
    }
})

/*
    注意：改變state中的複合類型數據必須讓數據直接發生變化（地址發生變化）
    好比
    arr:[{id:xx,num:123}]
    要改變它的數字，首先找到這組，改變外面的arr
    {id:xx,num:1234}
    state.arr = [...state.arr]//把新地址賦給ta
*/

五、將store掛載到vue（min.js）

new Vue({
  render: h => h(App),
  store//將store掛載 vue實例上
}).$mount('#app')

 

 

狀態管理模式

單向數據流的示意圖

（只能從一個方向來修改狀態）

改變數據只有經過Actions（actions又經過mutations）更改

狀態進行更改以後會影響視圖，視圖要經過actions發起一個行爲，才能更改數據

 

Vuex的幾個核心模塊

State：訪問狀態對象

Mutation：修改狀態

Getter：計算過濾操做

Action：異步修改狀態

Module：模塊組

每一個核心都有相對應的輔助函數（用來簡化操做）

mapState、mapMutation、mapGetter、mapAction

使用以前須要引入下，好比

import {mapState,mapMutation} from 'vuex'

 

State

即Vuex中的基本數據

Vuex使用單一狀態樹，即用一個對象就包含了所有的狀態數據

//能夠經過Vue的Computed得到Vuex的state
const store = new Vuex.Store({
    state: {
        count:0
    }
})
const app = new Vue({
    //..
    store,
    computed: {
        count: function(){
            return this.$store.state.count
        }
    },
    //..
})
//每當 store.state.count 變化時, 都會從新計算，而且觸發更新DOM

 

//經過 store.state 來獲取狀態對象
//經過 store.commit 方法觸發狀態變動

 

Mutations

mutations下的操做都是同步，action能夠包含任意異步操做

只有mutations才能改變vuex中的數據狀態state

何時讓mutations改變，使用this.$store.commit('函數名稱')

每一個 mutation 都有一個字符串的 事件類型 (type) 和 一個 回調函數 (handler)

這個回調函數就是咱們實際進行狀態更改的地方，而且它會接受 state 做爲第一個參數

 

Getter

他能夠從store 中的 state 中派生出一些狀態

getters接收state做爲其第一個參數，接受其餘 getters 做爲第二個參數，如不須要，第二個參數能夠省略

與state同樣，也能夠經過Vue的computed得到Vuex的getters

getters等同於vue的computed(計算屬性)，也是上來就會執行一次

應用場景：

當數據發生變化時去作（派生）另外一個事物

 

Action

Action 相似 mutation

與mutation的區別：

一、Action能夠包含任意異步操做，而mutation是同步的

二、Action 提交的是 mutation，而不是直接更改狀態（只有mutation才能更改）

Action 經過 store.dispatch 方法觸發

actions:{
    actionsName($store,能夠跟參數){
    //異步環境以後使用
        $store.commit('add,參數')
    }
}

view層使用

this.$store.dispatch('actionsName,傳參')

應用場景：

只要是這個數據狀態須要不少組件時間，而且仍是後臺請求的數據（異步數據）就要使用Action

Modules

使用單一狀態樹，會致使應用的全部狀態集中到一個很大的對象，形成臃腫。

Vuex 容許咱們將 store 分割到模塊（module），從而解決臃腫問題

每一個模塊擁有本身的 state、mutation、action、getters

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的狀態
store.state.b // -> moduleB 的狀態

 

---

 

Vuex 的思想是 ：當咱們在頁面上點擊一個按鈕，它會觸發(dispatch)一個action, action 隨後會執行(commit)一個mutation, mutation 當即會改變state,  state 改變之後,咱們的頁面會state 獲取數據，頁面發生了變化。 Store 對象，包含了咱們談到的全部內容，action, state, mutation

 

參考：https://www.cnblogs.com/y896926473/p/6709733.html

　　　https://segmentfault.com/a/1190000015782272