vuex使用理解

先不說原理,直接說使用吧,用着用着就 明白了

A: 需求:

在項目中,組件之間是獨立的,組件之間要想實現通訊,父子之間通訊能夠用props選項,可是兄弟之間的通訊就比較複雜

B: 簡單理解:

若是在state中定義一個數據以後,咱們能夠在項目中的任何一個組件裏獲取和修改,而且咱們的修改能夠獲得全局的相應變動 好比

let state = {
  userList: [], // 用戶列表
}
這個userList裏的數據,能夠在全局使用
複製代碼

C: vuex種的五個基本屬性

1, 咱們能夠經過this.$store在vue的組件中獲取vuex的實例

2, State:vuex中的數據源,能夠經過thsi.$store.state獲取在vuex中聲明的全局變量的值

3, Getter:至關於vue中的computed(計算屬性),能夠用於監聽/計算state中值的變化

4, Mutation: vuex中提交更改數據的方法(只能同步執行)

5, Action:

6, Module: 模塊化vuex

• 1,先開始使用,在項目中新建一個store文件夾,至關於一個倉庫,在store文件夾下面新建index.js文件

import Vue from 'vue'
import Vuex from 'vuex' // 引入vuex
Vue.use(Vuex)
const store = new Vuex.Store(); // 實例化
export default store
複製代碼

• 2, 在main.js裏面引入store,而後全局註冊一下,這樣就能夠在任何組件使用this.$store了

import store from './store' //引入store
new Vue({
  el: '#app',
  router,
  store, //使用store
  template: '<App/>',
  components: { App }
})
複製代碼

• 3, 回到store文件夾的index.js文件,咱們聲明一個state變量,賦值給一個對象,裏面定義兩個初始的屬性,而後在實例化的Vuex.Store裏面傳入一個空對象,把聲明的state放進去

說明: vuex使用單一狀態樹,state是惟一數據源,因此每一個瑩瑩僅包含一個store實例,

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
 const state = { //要設置的全局訪問的state對象
    showHello: true,
    changeNum: 0
    //要設置的初始屬性值
}
 const store = new Vuex.Store({
   state
})
export default store
複製代碼

說明: 作完這個以後,咱們就能夠在任何組件裏面使用this.%store.showHello和this.%store.changeNum來獲取定義的值了

• 4,vuex官方提供了一個getter(能夠認爲是store的計算屬性),想計算屬性同樣,getter的返回值會根據它的一來被緩存起來,只有當它的依賴值發生改變纔會被從新計算,把他也扔到state裏面

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state={   //要設置的全局訪問的state對象
    showHello: true,
    changeNum: 0
 //要設置的初始屬性值
}
const getters = {   //實時監聽state值的變化(最新狀態)
    isShow(state) {  //方法名隨意,主要是來承載變化的showHellor的值
       return state.showHello
    },
    getChangedNum() {  //方法名隨意,主要是用來承載變化的changeNum的值
       return state.changeNum
    }
}
const store = new Vuex.Store({
   state,
   getters
});
export default store;
複製代碼

• 5, 如今只有定義的state初始值,可是咱們須要改變初始值,接下來就是mutation了mutation也是一個對象,這個對象裏面放能夠改變state初始值的方法,具體的就是:給裏面的方法傳入參數或者額外的其餘參數,理由vue的雙向數據驅動進行值得改變,把定義好的mutation也扔進Vuex.Store裏面.

更改vuex的store中的狀態的惟一方法就是提交mutation,vuex中的mutation很是相似事件,就是每一個mutation都有一個字符串的事件類型(type)和一個回調函數(handler),這個回調函數就是咱們實際進行狀態更改的地方,而且它會接受state做爲第一個參數

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state={  //要設置的全局訪問的state對象
    showHellor: true,
    changeNum:0
    //要設置的初始屬性值
 };
const getters = { //實時監聽state值的變化(最新狀態)
    isShow(state) { //承載變化的showHellor的值
       return state.showHellor
    },
    getChangedNum(){ //承載變化的changebleNum的值
       return state.changeNum
    }
};
const mutations = {
    show(state) { //自定義改變state初始值的方法,這裏面的參數除了state以外還能夠再傳額外的參數(變量或對象);
        state.showHellor = true;
    },
    hide(state) { //同上
        state.showHellor = false;
    },
    newNum(state, sum){ //同上,這裏面的參數除了state以外還傳了須要增長的值sum
       state.changeNum += sum;
    }
};
複製代碼

• 6, 這個時候就能夠用 this.$store.commit('show') 或

  this.$store.commit('hide') 以及

  this.$store.commit('newNum',6)在別的組件裏面進行改變showHello和changeNum的值了

• 7, 可是在vuex中,mutation裏的方法都是同步,意思就是,好比這個this.$store.commit('newNum',sum)方法,

兩個組件裏用執行獲得的值,每次都是同樣的,顯然不是咱們須要的,vuex還提供了actions,把action也放入Vuex.Store裏面,這個actions也是對象變量,裏面的Action方法,能夠包含任意異步操做,這裏的異步就是用異步發出mutation裏面的方法,action裏面的自定義函數接受一個context參數和要變化的形參

// 實踐中咱們能夠用es6參數解構來剪髮代碼
actions: {
  increment ({ commit }) {
    commit('increment')
  }
}
複製代碼

context和store實例具備相同的屬性和方法,能夠調用context.commit()提交一個mutation,或者經過context.state和context.getter來偶去state和getter

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const state={ //要設置的全局訪問的state對象
    showHello: true,
    changeNum:0
    //要設置的初始屬性值
   };
const getters = { //實時監聽state值的變化(最新狀態)
    isShow(state) { //承載變化的showHello的值
       return state.showHello
    },
    getChangedNum(){ //承載變化的changebleNum的值
       return state.changeNum
    }
};
const mutations = {
    show(state) { //自定義改變state初始值的方法，這裏面的參數除了state以外還能夠再傳額外的參數(變量或對象);
        state.showHello = true;
    },
    hide(state) { //同上
        state.showHello = false;
    },
    newNum(state,sum){ //同上，這裏面的參數除了state以外還傳了須要增長的值sum
       state.changeNum += sum;
    }
};
 const actions = {
    hideHello(context) { //自定義觸發mutations裏函數的方法，context與store 實例具備相同方法和屬性
        context.commit('hide');
    },
    showHello(context) { //同上註釋
        context.commit('show');
    },
    getNewNum(context, num){ //同上註釋，num爲要變化的形參
        context.commit('newNum', num)
    }
};
  const store = new Vuex.Store({
   state,
   getters,
   mutations,
   actions
});
export default store;
複製代碼

action 經過 store.dispatch 方法觸發

在外部組件進行全局執行actions裏面的方法的時候,你只須要執行

this.$store.dispatch('hideHello')

或this.$store.dispatch('showHello')

以及this.$store.dispatch('getNewNum', 6) //6要變化的實參