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

  • 相关阅读:
    日志组件一:Log4j
    HTTPS加密那点事--轻松秒懂HTTPS非对称加密
    图解Git
    Python 迭代器 & __iter__方法
    Fiddler 抓包工具总结
    Python使用struct处理二进制(pack和unpack用法)
    Python binascii
    常见证书格式及相互转换
    MyBatis Generator 详解
    MyBatis学习总结(八)——Mybatis3.x与Spring4.x整合
  • 原文地址:https://www.cnblogs.com/si-dian/p/11739333.html
Copyright © 2011-2022 走看看