zoukankan      html  css  js  c++  java
  • vuex

    vuex的官网介绍:https://vuex.vuejs.org/zh/

    vuex的是什么及作用:

      vuex是实现组件全局状态(数据)管理的一种机制,可以方便的 实现组件之间数据的共享

    什么样的场景使用vuex:

      1. 组件之间大范围传输/共享数据

      2.组件间共享的数据,才有必要存到vuex中;非共享数据 应存储到组件自身的data中

    使用vuex的好处:

      1.在vuex中集中管理共享的数据,易于开发和维护

      2. 能够高效的实现组件之间的数据共享,提高开发效率

      3.存储在vuex中的数据是响应式的,弄够实时保持数据与页面同步

    在项目的使用:

      1.在项目中安装vuex

        npm i vuex --save

      2.导入 vuex:在store的index.js中

        import Vuex form “vuex” 

        Vue.use(Vuex)

      3.创建store对象

        const store = new Vue.Store({

          //state 中存放的就是全局共享的数据

          state:{ count:0}

        })

      4.将store对象挂载到vue实例中

        new Vue({

          el:“#app”,

          render:h=>h(app),

          router,

          //将创建的共享数据对象,挂载到vue 实例中

          //所有的组件,就可以直接从store中获取全局的数据了

          store

        })

      5.在页面中访问 state中的数据:this.$store.state.全局数据名称

        即:this.$store.state.count 但是地球人都知道,在组件的template里面 是不用写this的  

        所以在templat里面直接写上  <h2>sstate中的数据 {{$store.state.count}} </h2>

      

    vuex的五个核心概念:

      

    在项目的使用:

    实际场景:
      1. 用户的登录信息,可以放到vuex里面,也可放到浏览器缓存中

      

  • 相关阅读:
    实验 7 综合练习一
    实验或作业模版: 实验 6-1 最大公约数 最小公倍数
    实验 6 数组1
    Pro
    作业 4 函数应用
    老大
    双端队列
    zxa and leaf
    Baby Ming and Matrix games
    The more, The Better
  • 原文地址:https://www.cnblogs.com/KoBe-bk/p/13773735.html
Copyright © 2011-2022 走看看