zoukankan      html  css  js  c++  java
  • Vuex----核心概念和API

    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

  • 相关阅读:
    Thinkphp的import使用方法
    bug1
    setTimeout关于函数名做参数的问题
    ubuntu-12.04.5安装cacti笔记
    第七周作业
    第六周作业
    第五周作业
    第四周编程总结
    2019年春季学期第三周作业
    第二周编程总结
  • 原文地址:https://www.cnblogs.com/si-dian/p/11739333.html
Copyright © 2011-2022 走看看