• 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里面,也可放到浏览器缓存中

      

  • 相关阅读:
    【36氪收录】观「招商银行」隐私计算布局的思考
    如何用cmake编译
    docker | Ubuntu16.04安装与卸载docker
    通过删除注册表重新获得软件试用期
    k8s | 重启Kubernetes Pod的几种方式
    2021年终总结(一)
    凡是过往、皆为序章20210917PPT分享
    多厂商容器平台开发系统性总结
    VS2022安装.NetFramework4.0目标包的方法
    C# Winform窗体继承过程中,TableLayoutPanel是不支持继承的
  • 原文地址:https://www.cnblogs.com/KoBe-bk/p/13773735.html
Copyright © 2020-2023  润新知