VUEX 的 store 用法

重新搭建项目

• 进入以个文件夹：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不胜感激 ！