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

  

原文地址:https://www.cnblogs.com/KoBe-bk/p/13773735.html