Vue Vuex使用和原理

vuex  github项目

vuex在线文档

Vuex运行原理

 

 state:

1)vuex管理的状态对象

2）它应该是唯一的

const state = {

    xxx:initValue

}

mutations

1)包含多个直接更新state的方法（回调函数）的对象

2）谁来触发：action中的commit（‘mutation名称’）

3）只能包含同步的代码，不能写异步代码

const mutations={
    yyy(state,{data1}){
        //更新state的某个属性
}
}

actions

1）包含多个事件回调函数的对象

2）通过执行：commit()来触发mutation的调用，间接更新state

3）谁来触发：组件中：$store.dispatch('action名称')//'zzz'

4）可以包含异步代码（定时器，ajax）

const actions={
 zzz({commit,state},data1){
commit('yyy',{data1})
}
}

getters

1）包含多个计算属性{get}的对象

2）谁来读取：组件中：$store.getters.xxx

const getters={

 mmm(state){

return ...

}
}

modules

1)包含多个module

2）一个module是一个store的配置对象

3）与一个组件（包含有共享数据）对应

向外暴露store对象

export default new Vuex.Store({ 
    state,
    mutations,
    actions,
    getters
})

组件中

import {mapState,mapGetters,mapActions} from 'vuex'
export default {

    computed:{
        ...mapState(['xxx']),
        ...mapGetters(['mmm']),
}
    methods:mapActions(['zzz'])
}

{{xxx}}{{mmm}} @click="zzz(data)"

映射store

import store from './store'
new Vue({
    store
})

store对象

1）所有的vuex管理的组件中都多了一个属性$store,它就是一个store对象

2）属性：

    state:注册的state对象

     getters:注册的getters对象

3）方法：

    dispatch(actionName,data):分发调用action