zoukankan      html  css  js  c++  java
  • vuex基本使用

    1.组件之间共享数据的方式
        父向子传值:v-bind 属性绑定
        子向父传值:v-on 事件绑定
        兄弟组件之间共享数据:EventBus
        $on 接收数据的那个组件
        $emit 发送数据的那个组件
    2.Vuex 是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间数据的共享。
      好处:
        ①能够在vuex 中集中管理共享的数据,易于开发和后期维护
        ②能够高效地实现组件之间的数据共享,提高开发效率
        ③存储在vuex 中的数据都是响应式的,能够实时保持数据与页面的同步  
        一般情况下,只有组件之间共享的数据,才有必要存储到vuex 中;对于组件中的私有数据,依旧存储在组件自身的data 中即可。

      

    3.基本使用
      1. 安装 vuex 依赖包   npm install vuex --save   2. 导入 vuex 包   import Vuex from 'vuex'   Vue.use(Vuex)   3. 创建 store 对象   const store = new Vuex.Store({     // state 中存放的就是全局共享的数据      state: { count: 0 }   })
      4. 将store 对象挂载到vue 实例中
      new Vue({
        el: '#app',
        render: h => h(app),
        router,
        // 将创建的共享数据对象,挂载到Vue 实例中
        // 所有的组件,就可以直接从store 中获取全局的数据了
        store
       })

      

    3. Vuex 的核心概念
       State 
      Mutation
      Action
      Getter
     
    State:

     

    Mutation:


     Action:

     

     

     Getter:

     

     
     
     
  • 相关阅读:
    vue 输入框数字、中文验证
    微信小程序 画布arc截取圆形图片
    change事件同一文件多次选中
    form表单提交
    微信小程序 拖动图片一边进行截取
    初步了解XMLHttpRequest对象、http请求的封装
    encodeURI和uncodeURIComponent的介绍
    vue-cli 3.0安装和使用
    MySQL学习中,遇到的问题记录
    react学习之redux和redux-react用法
  • 原文地址:https://www.cnblogs.com/yscec/p/12064972.html
Copyright © 2011-2022 走看看