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