脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue this.$store.state.xx.xx

浅谈Vue中的this.$store.state.xx.xx

 更新时间：2021年09月01日 14:59:38   作者：鲨鱼辣椒灬  
这篇文章主要介绍了Vue中的this.$store.state.xx.xx用法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

Vue this.$store.state.xx.xx

this.$store.state.xx.xx 其实是Vue用到状态管理工具Vuex

Vuex官网：https://vuex.vuejs.org/zh/

感觉就是把组件的共享状态抽取出来，以一个全局单例模式管理。在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为！（在项目的任意地方都可以随时获取和动态的修改，在修改之后，vue会为你的整个项目做更新）

获取store中的数据

在这里插入图片描述

在这里插入图片描述

在vue根文件中注册store，这样所有的组件都可以使用store中的数据了

我的项目文件结构

在这里插入图片描述

在main.js文件中注册store

在这里插入图片描述

在这里插入图片描述

然后代码中写到

在这里插入图片描述

登录后前端有缓存userId，然后通过userId再去查找

这个位子就用到了 公共页面里面的

在这里插入图片描述

在这里插入图片描述

总结：main.js是工会老大，你把奖励给了老大，老大有的道具会交给你使用，那么你就可以通过this来使用。

vue项目都在什么时候用store.state、$store.state和this.$store.s

store 和 [this.]$store

简单来说，如果你在根组件下注入了store那么所有的.vue文件里使用就可以直接用 this.$store.xxxx

Vue官网：为了在 Vue 组件中访问 this.$store.property，你需要为 Vue 实例提供创建好的 store。Vuex 提供了一个从根组件向所有子组件，以 store 选项的方式“注入”该 store 的机制

//main.js
import store from './store'
new Vue({
  el: '#app',
  store, //根组件注入store
})
//index.vue
getData() {
 return {
  userId: this.$store.state.user.userId,
  ......
 }
}

而在js文件里面如果想要使用store，就必须先引入import store from '@/store'然后使用store.xxx，因为js里面是打印不出来this.$store的

//  src/test.js文件
import store from './store/';
console.log(store)
console.log(this) // undefined
console.log(this.$store) // 会报错

this.$store 和 $store

$store 是挂载在 Vue 实例上的（即Vue.prototype），而组件也其实是一个Vue实例，在组件中可使用this访问原型上的属性

<template> 拥有组件实例的上下文，可直接通过 {{$store.state.XXX }} 访问，等价于 script 中的 this.$store.state.XXX

就把 $store 看成在data中return的某个变量，在下面的script中使用需要加this，在上面的template中不需要加this

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • Vue组件生命周期三个阶段全面总结讲解

    Vue组件生命周期三个阶段全面总结讲解

    Vue的生命周期就是vue实例从创建到销毁的全过程,也就是new Vue() 开始就是vue生命周期的开始。Vue 实例有⼀个完整的⽣命周期,也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载 等⼀系列过程,称这是Vue的⽣命周期
    2022-11-11
  • Element如何实现loading的方法示例

    Element如何实现loading的方法示例

    本文主要介绍了Element如何实现loading的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • Vue如何设置滚动条自动保持到最底端

    Vue如何设置滚动条自动保持到最底端

    在开发中我们常常会遇到需要让滚动条保持到最底端的需求,比如在开发一个聊天框时,请求接口拿到消息列表数据,展示到前端页面时,需要让滚动条自动滚到最底端,以此来展示最后的聊天记录,这篇文章主要介绍了Vue如何设置滚动条自动保持到最底端,需要的朋友可以参考下
    2024-08-08
  • Vue Echarts实现图表的动态适配以及如何优化

    Vue Echarts实现图表的动态适配以及如何优化

    这篇文章主要介绍了Vue Echarts实现图表的动态适配以及如何优化，在实际的前端开发过程中，动态适配是一个非常重要的问题，在数据可视化的场景下，图表的动态适配尤为重要，需要的朋友可以参考下
    2023-05-05
  • vue-resource post数据时碰到Django csrf问题的解决

    vue-resource post数据时碰到Django csrf问题的解决

    这篇文章主要介绍了vue-resource post数据时碰到Django csrf问题的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-03-03
  • 一次在vue中使用post进行excel表下载的实战记录

    一次在vue中使用post进行excel表下载的实战记录

    最近遇到了需求,觉着有必要给大家总结下,这篇文章主要给大家介绍了关于一次在vue中使用post进行excel表下载的实战记录,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-07-07
  • vue使用axios post发送json数据跨域请求403的解决方案

    vue使用axios post发送json数据跨域请求403的解决方案

    这篇文章主要介绍了vue使用axios post发送json数据跨域请求403的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-12-12
  • Vue中使用event的坑及解决event is not defined

    Vue中使用event的坑及解决event is not defined

    这篇文章主要介绍了Vue中使用event的坑及解决event is not defined,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • Vue实现验证码功能

    Vue实现验证码功能

    这篇文章主要为大家详细介绍了Vue实现验证码功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-12-12
  • vue 防止页面加载时看到花括号的解决操作

    vue 防止页面加载时看到花括号的解决操作

    这篇文章主要介绍了vue 防止页面加载时看到花括号的解决操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11

最新评论