乐趣区

关于vue.js: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/ZhongBangKe… 不胜感激!

退出移动版