VUEX的store用法_vuex store_CRMEB的博客-程序员秘密

重新搭建项目
进入以个文件夹：cd vuewebpackapp
初始化这个项目：vue init webpack vuexapp
一系列的选择确认后
就会创建好文件
在搭建好的环境中操作
父组件传递数据给子组件
在components新建parent.vue（父组件）和一个son.vue子组件；
在父组件内引入子组件import son from ‘./son’,并传msg给子组件

在这里插入图片描述

子组件如何接收父组件传递的内容：

在这里插入图片描述

helloworld.vue
子组件传数据给父组件
父组件从子组件接收数据，如何设置

在这里插入图片描述

子组件向父组件传递数据
在子组件设置按钮

在这里插入图片描述

在父组件里接收

在这里插入图片描述

渲染在页面上

在这里插入图片描述

VUEX的作用？
例如打开淘宝上面有很多不同的界面和组件，但是每一个组件都知道我的登录状态，就是用vuex来实现的

用来管理状态，共享数据，在各个组件之间管理外部状态，如何使用？
第一步：引入vuex，通过use方法使用它；
第二步：创建状态仓库；
第三步：通过this.$store.state.xxx直接拿到需要的数据

//创建状态仓库
var store = new Vuex.Store({
    state:{
    XXX:xxx
    }
})
//直接通过this.$store.xxx拿到全局状态
复制代码

新建outter.vue
outter文件和parent和son文件，没有父子关系，但是又想让他们之间共享数据，就用到vuex文件；
在终端安装：npm i vuex
在main.js中引入Vuex：import Vuex from ‘vuex’
接着在main.js中use一下：Vue.use(Vuex)
创建状态仓库
var store = new Vuex.store({ state:{ num:88 } })

在这里插入图片描述

在son.vue文件中如何获取文件？

在这里插入图片描述

把这个计算属性渲染到页面上：

在这里插入图片描述

在父组件中的代码与子组件类似，只是getNum换成getCount
在outter中也是一样

在这里插入图片描述

三个组件都拿到了Num：88，实现了资源共享。

最后
如果你觉得此文对你有一丁点帮助，点个赞。或者可以加入我的开发交流群：1025263163相互学习，我们会有专业的技术答疑解惑

如果你觉得这篇文章对你有点用的话，麻烦请给我们的开源项目点点star: https://gitee.com/ZhongBangKeJi/CRMEB不胜感激！

本文链接：https://blog.csdn.net/CRMEB/article/details/121968580

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

ORA-01810格式代码出现两次_ora-18080_Ljcode_2014的博客-程序员秘密

ORA-01810 格式代码出现两次

你以为你以为的就是安全的密码？_weixin_34318272的博客-程序员秘密

什么是好密码？几乎每一个网站都给出了差不多一样的标准：长度得8位以上；需含大小写字母、数字及符号；不要用任何出现在字典里面的词，包括部分替换（如用[email protected]或fai1也不好）。　　只要你的密码满足了这些标准，基本上网站都会奖励你一个绿色的强密码标示—好密码。但是实际上你和网站都错了。为什么？原因首先要从密码是如何被破解讲起。***如何破解密码　　网站是通过...

2020CCPC(长春) - Ragdoll(启发式合并+带权并查集)_Frozen_Guardian的博客-程序员秘密

题目大意：初始时给出 n 个集合，每个集合中都包含有一个数字，现在要求执行 m 次操作，每次操作分为下列三种类型：1 x y：在 x 位置新建一个集合，并且放置一个数字 y 2 x y：合并集合 x 和集合 y 3 x y：将集合 x 中的数字修改为 y每次执行完操作后需要回答，对于每个集合而言，的匹配数之和题目分析：首先考虑何时 x 和 y 才可以匹配，假设任取两个数字 x 和 y，再设 gcd( x , y ) = gcd = x ^ y，需要满足 x % gcd == 0 &..

Ubuntu学习笔记：没有ssh-server服务_没有openssh服务器_小马啵啵的博客-程序员秘密

Ubuntu学习笔记：没有ssh-server服务没有就安装（在服务器端）sudo apt-get install openshh-server我这里是因为已经有了，没有的话，安装会要输入Y然后回车等待安装完查看是否安装成功看到openssh-sercer就是安装成功...

C++面试100题，1——40_c++ 一级_aFakeProgramer的博客-程序员秘密

C与c++有什么不同？在c++中能使用引用就不要使用指针，要改变一个一级指针就要用一个二级指针。要改变一个二级指针就要用一个三级指针，会变得越来越复杂。A类中的func1是虚函数，func2不是虚函数。B类中 func1是虚函数，func2是虚函数。这题选A引用与指针的区别？虚继承和虚函数...