码迷,mamicode.com
首页 > Windows程序 > 详细

Vuex----核心概念和API

时间:2019-10-25 18:09:45      阅读:103      评论:0      收藏:0      [点我收藏+]

标签:compute   ons   计算属性   col   就是   value   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 名称’,data1)//‘zzz‘

4)可以包含异步代码(定时器,ajax)

  const actions = {

             zzz({commit,state},data1){

                 commit(‘yyy‘,{data1}) 

  }

}

getters

1)包含多喝计算属性(get)的对象

2)谁来读取:组件中:$store.getters.xxx

    const getter = {

        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

 

 

 

 

 

 

Vuex----核心概念和API

标签:compute   ons   计算属性   col   就是   value   vuex   属性   共享   

原文地址:https://www.cnblogs.com/humiao-0626/p/11739333.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!