Vuex的使用

前言

Vuex是專門爲vue開發的狀態管理模式，爲應用中的組件提供集中式的管理與存儲，將相同的狀態抽離出來，方便多組件共享狀態

Store

export default new Vuex.Store({
    state,
    mutations,
    actions
})
複製代碼

Vuex的核心是Store，是倉庫的意思，相似一個容器包含大部分的狀態，它的狀態存儲是響應的，即當Store中的狀態發生改變，相應的組件內容也會發生更新，惟一改變狀態的方式是顯示的提交mutation。

State

const state ={
    count: 1,
    list:[]
}

購物數量{{$store.state.count}}
<button type="button" name="button" @click="increment">增長</button>
<button type="button" name="button" @click="decrement">刪減</button>
複製代碼

state定義了數據的數據結構並設置初始化狀態，在組件中可經過$store.state.count來得到

Mutation

Vue.use(Vuex)

const state ={
    count: 1,
    list:[]
}

const mutations={
    increment(state,param){
        window.console.log(param)
        state.count+=param
    },
    //接收從組件傳過來的參數
    decrement(state){
        state.count--
    }
}
...
複製代碼

使用mutation，是惟一更新應用狀態的地方
mutation相似於事件：每個mutation都有一個字符串類型的type（事件類型）和handler（回調函數，而這個函數就是咱們實際進行狀態更改的地方，而且會接收state做爲其第一個參數），修改狀態
mutation必須是同步函數

Action

// 在組件中分發action，能夠使用this.$store.dispatch或者使用輔助函數mapActions
  methods: mapActions([
        'increment',// -> 這裏映射爲 this.$store.dispatch('increment');
        'decrement'// -> 這裏映射爲 this.$store.dispatch('decrement');
    ]),

複製代碼

Vue.use(Vuex)
    
const state ={
    count: 1,
    list:[]
}

const mutations={
    increment(state,param){
        window.console.log(param)
        state.count+=param
    },
    //接收從組件傳過來的參數
    decrement(state){
        state.count--
    }
}

const actions ={
    increment:({commit},param)=>{
        commit('increment',param)
        //提交mutation
    },,
    decrement:({commit})=>{
        commit('decrement')
    }
}

export default new Vuex.Store({
    state,
    mutations,
    actions
})
複製代碼

Action提交的是mutation，而不是直接變動狀態

Action支持任意的異步操做（異步請求數據）

Module

import money from './modules/a'
import count from './modules/b'


Vue.use(Vuex)
export default new Vuex.Store({
    modules:{
        money,
        count
    }
})
複製代碼

Vuex容許咱們將store分割成模塊，每一個模塊擁有本身的state，mutation，action，getter等,按導出名使用