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:

     

     
     
     
  • 相关阅读:
    前序中序输出后序
    Blah数集
    中缀表达式转后缀表达式 (栈)
    1357:车厢调度 (栈)
    最长公共上升子序列 (LIS+LCS+记录)
    1481:Maximum sum (前缀和+dp)
    8464:股票买卖
    7627:鸡蛋的硬度
    2989:糖果
    U33405 纽约 (二分)
  • 原文地址:https://www.cnblogs.com/yscec/p/12064972.html
Copyright © 2011-2022 走看看