Vuex 基本使用

1、index.js

import Vue from "vue";
import Vuex from "vuex"

// 使用Vuex
Vue.use(Vuex)

// 准备actions对象--响应组件中的动作
const actions = {
    addOdd(context, value){
        if(context.state.sum % 2){
            context.commit('ADD', value)
        }
    },
}
// 准备mutations对象--修改state中的数据
const mutations = {
    ADD(state, value){
        // console.log(state.sum, value)
        state.sum += value
    },
}
//准备state对象--保存具体数据
const state = {
    sum:0
}

//创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state
})

2、组件读取Vuex中数据(vuex)：$store.state.sum

3、组件中修改vuex中的数据

$store.dispatch('action中的方法', 数据)
$store.commit('mutations中的方法', 数据)

若没有其他业务逻辑，组件也可以越过actions，即不写dispatch，直接写commit

 

 

理解

1、在state中存数据在vue模板上 $store.state.sum

2、this.$store.dispatch('add', value)   dispatch -> action对象

3、在action对象中定义方法 add(context, value){ context.commit('ADD', value) } commit-> mutations对象，action写业务逻辑

4、在mutations对象中完成逻辑 ADD(state, value){}  state.sum(获取state中的sum)，value是最开始传进来的值

5、没有用到action可以直接 this,$store.commit()

6、注意：在mutations中方法用大写