vueX实现组件之间的数据共享

最新推荐文章于 2024-07-19 00:30:32 发布

Realistic-er

最新推荐文章于 2024-07-19 00:30:32 发布

阅读量261

点赞数 1

本文链接：https://blog.csdn.net/m0_52518047/article/details/115389200

版权

这篇博客介绍了如何在Vue应用中利用vuex来实现组件间的共享数据。vuex的state作为公共数据源，存储全局状态，组件可以通过`this.$store.state`直接访问或使用`mapState`映射计算属性来获取。此外，还展示了在请求拦截器中如何根据state中的用户信息设置请求头。

摘要由CSDN通过智能技术生成

vueX:实现组件之间的数据共享

vuex的state和vue的data有很多相似之处,都是用于存储一些数据,或者说状态值.这些值都将被挂载数据和dom的双向绑定事件,也就是当你改变值的时候可以触发dom的更新

1.state提供唯一的公共数据源，所有共享的数据都要统一放到store的state中进行存储

export default new Vuex.Store({
  state: {
    user: getItem('user')
  }
})

(1.)组件访问state中数据的第一种方式：

this.$store.state.全局数据名称

比如想要访问这个user，那么就可以this.$store.state.user

(2.)组件访问state中数据的第二种方式：

首先从vuex中按需导入mapstate函数

import { mapState }  from  'vuex'

通过刚才导入的mapState函数，将当前组件需要的全部数据，映射为当前组件的computed计算属性

…mapState([‘count’])这个就成了计算的属性了

<h1>{{count}}</h1>

computed: {
  ...mapState(['count'])
}

非组件中如果想使用容器中的数据：

第一步：引入

import store from ‘@/store/index.js’

第二步：当成实例化对象去使用

const { user } = store.state


import store from '@/store/index.js'

const request = axios.create({
  baseURL: 'http://ttapi.research.itcast.cn' // 基础路径
})
// 请求拦截器
request.interceptors.request.use(function (config) {
  // Do something before request is sent
  const { user } = store.state
  console.log(typeof user)
  // 如果用户已登陆，统一给接口设置token信息
  if (user) {
    console.log(1)
    config.headers.Authorization = `Bearer ${user.token}`
    console.log(config.headers.Authorization)
  }
  return config
}, function (error) {
  // Do something with request error
  return Promise.reject(error)
})
export default request