vuex學習筆記

1、vuex的目的

　　把組件的共享狀態抽取出來，以一個全局單例模式管理。在這種模式下，組件樹構成了一個巨大的視圖，無論在樹的哪一個位置，任何組件都能獲取狀態或觸發行爲。

2、vuex集中式管理數據

　　安裝 cnpm i vuex

　　

 　　vue init webpack-simple vuex-demo

3、核心概念：

　　一、State：（初始狀態，初始數據）

　　　　從store實例中讀取狀態最簡單的方法就是在計算屬性中返回某個狀態

　　eg:computed:{

　　　　　　count(){

　　　　　　　　return store.state.count

　　　　　　}

　　　　}

　　　　每當store.state.count變化的時候，都會從新求取計算屬性而且觸發更新相關聯的DOM

 

　　二、有時候咱們須要從store中的state中派生出一些狀態對列表進行過濾並計數：

　　　　vuex容許咱們在store中定義getter(能夠認爲是store的計算屬性)。

　　getter會暴露爲store.getters對象經過store.getters.doneTodes獲取（doneTodes時本身命名的getters函數）參數爲state

　　mapGetters 輔助函數

　　mapGetters 輔助函數僅僅是將 store 中的 getter 映射到局部計算屬性：

import { mapGetters } from 'vuex'

　　export default {
 　　 // ...
 　　 computed: {
  　　// 使用對象展開運算符將 getter 混入 computed 對象中
   　　 ...mapGetters([
     　　 'doneTodosCount',
     　　 'anotherGetter',
     　　 // ...
    　　])
  　　}
　　}

 

getter即動態的數據
三、mutations

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

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 變動狀態
      state.count++
    }
  }
})

 

你不能直接調用一個 mutation handler。這個選項更像是事件註冊：「當觸發一個類型爲 increment 的 mutation 時，調用此函數。」要喚醒一個 mutation handler，你須要以相應的 type 調用 store.commit 方法：

store.commit('increment')

Mutation 必須是同步函數

四、action

Action 相似於 mutation，不一樣在於：

• Action 提交的是 mutation，而不是直接變動狀態。
• Action 能夠包含任意異步操做。

讓咱們來註冊一個簡單的 action：

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

 

Action 函數接受一個與 store 實例具備相同方法和屬性的 context 對象，所以你能夠調用 context.commit 提交一個 mutation，或者經過 context.state 和 context.getters 來獲取 state 和 getters。

實踐中，咱們會常常用到 ES2015 的 參數解構來簡化代碼（特別是咱們須要調用 commit 不少次的時候）：

actions: { increment ({ commit }) { commit('increment') } }

五、module

Module

因爲使用單一狀態樹，應用的全部狀態會集中到一個比較大的對象。當應用變得很是複雜時，store 對象就有可能變得至關臃腫。

爲了解決以上問題，Vuex 容許咱們將 store 分割成模塊（module）。每一個模塊擁有本身的 state、mutation、action、getter、甚至是嵌套子模塊——從上至下進行一樣方式的分割：

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 的狀態

　　

按鍵加減數字完整實例

法1：統一一個store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
var state = {
count:10
}
const actions = {
increment:({//處理幹什麼，判斷，異步請求，流程控制
commit
})=>{
commit('increment')
},
decrement:({//處理幹什麼，判斷，異步請求，流程控制
commit
})=>{
commit('decrement')
},
clickOdd:({
commit,state
})=>{
if(state.count%2==0){
// state.count++;
commit('increment')
}
},
clickAsync:({commit})=>{
new Promise((resolve)=>{
setTimeout(function(){
commit('increment')
},1000)
})
}//actions中能夠放異步處理,但mutations中只能放同步處理
}
const mutations = {//處理數據的變化
increment(state){
state.count++;
},
decrement(state){
state.count--;
}
}
const getters = {
count(state){
return state.count;
},
isOdd(state){
return state.count%2==0?'偶數':'奇數'
}
}
//須要導出store對象
export default new Vuex.Store({
state,
actions,
mutations,
getters
})

 

法二、分爲多個js文件分別存在store文件夾下的actions.js,state.js,mutations.js,getters.js,type.js幾個文件中
eg:將上面代碼分爲多個文件：
一、index.js文件
　　

　　

 1 import Vue from 'vue'
 2 　　import Vuex from 'vuex'
 3 　　Vue.use(Vuex);
 4 　　import mutations from './mutations'
 5 　　import actions from './actions'
 6 　　// import getters from './getters'
 7 　　import state from './state'
 8 　　export default new Vuex.Store({
 9 　　modules:{
10 　　mutations
11 　　},
12 　　actions,
13 　　state,
14 　　getters
15 　　})

 

二、actions.js

　　當你的Mutations中沒有export getters時這裏clickOdd函數中的state.mutations.count也能夠換爲state.count。

　　可是當你的mutations中export getters時，這裏clickOdd函數中的state.mutations.count不能換爲state.count了，會獲取不到。

import * as types from './types.js'
export default{
increment:({commit})=>{
commit(types.INCREMENT)
},
decrement:({commit})=>{
commit(types.DECREMENT)
},
clickOdd:({commit,state})=>{
console.dir(state);
if(state.mutations.count%2==0){
commit(types.INCREMENT)
}
}

//法2：
// clickOdd:({commit,state})=>{
// console.dir(state);
// if(state.count%2==0){
// commit(types.INCREMENT)
// }
// }

,
clickAsync:({commit})=>{
new Promise((resolve)=>{
setTimeout(function(){
commit(types.INCREMENT)
},1000);
})
}
}

 

三、mutations.js　　

import {
INCREMENT,
DECREMENT
} from './types'
import getters from './getters'
import state from './state'
//這裏的INCREMENT使用方括號，不使用方括號都可
const mutations = {
[INCREMENT](state){
state.count++;
},
[DECREMENT](state){
state.count--;
}
}
export default{

 state,
mutations

}

 

//必須輸出state這裏輸出的是變化的state，存在mutations.mutations.state中

四、type.js

　

　export const INCREMENT = 'INCREMENT'
　　export const DECREMENT = 'DECREMENT'

 

五、getters.js　

export default{

count:(state)=>{
return state.count;
},
isOdd:(state)=>{
return state.count%2==0?'偶數':'奇數'
}
}　　

 

六、state.js

const state = { count:20 };
export default state