小白入门Vuex
发布日期:2022-02-17 02:39:46
浏览次数:28
分类:技术文章
本文共 1479 字,大约阅读时间需要 4 分钟。
Vuex
Vuex是什么
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。(简单理解就是多个组件需要访问的数据存放在这里面统一管理)
为什么用Vuex
# | 说明 |
---|---|
可以看到,根组件的data这个数据对A、B组件来说有多么麻烦了吧,一层一层往下传,又一层一层往上传;因此如果有个地方存放着这个data,各组件直接从里面获取或者设置不就好了吗?Vuex就有这个作用。 | |
有了Vuex,A可直接通过Getter获取到数据,B也可直接通过Mutation设置数据,就很方便啦。 |
Vuex使用
- 首先是搭建vue项目–>vue init webpack vuex_demo。
- 看一下项目是否搭建成功–>cd vuex_demo;npm run dev。
- 引入vuex,输入npm/cnpm install vuex --save 在package.json中看到vuex则证明安装成功。
- 在src下新建store文件夹,并在其里新建store.js文件。
// 1.引入import Vue from 'vue'import Vuex from 'vuex'// 2.使用Vue.use(Vuex)// 3.创建store对象并导出export const store = new Vuex.Store({ state: { Token: 'abc' }, getters: { // 获取token GET_TOKEN: (state) => { return state.Token } }, mutations: { // 设置token SET_TOKEN: (state, token) => { state.Token = token } }, actions: { // context类似于this.store login: (context, token) => { context.commit('SET_TOKEN', token) } }})
- 在main.js里引入store并添加到vue实例中。
// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import App from './App'// 4.main.js引入store,并添加到vue上 就可以通过this.$store访问import { store} from './store/store'Vue.config.productionTip = false/* eslint-disable no-new */new Vue({ el: '#app', store, components: { App }, template: ''})
- 在Helloworld.vue添加下面代码,具体见注释。
Hello Vuex.Token is { { token}}
- 运行结果。
转载地址:https://blog.csdn.net/qq_39811414/article/details/107143827 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
哈哈,博客排版真的漂亮呢~
[***.90.31.176]2024年03月14日 06时13分52秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
redis线程阻塞原因排插_Redis阻塞原因详解
2019-04-21
labview自动保存报表_基于LabVIEW的Excel报表的自动生成功能
2019-04-21
geotool 导出shp_Java 读取shape文件
2019-04-21
mysql 关联更新_MySQL UPDATE多表关联更新
2019-04-21
mysql call_mysql的call用法 call调用函数的例子
2019-04-21
python参数验证_参数验证,Python中的最佳实践
2019-04-21
python画多层网络_在pymn中修改多层网络图
2019-04-21
java 密钥 aes 解密_Java中AES加密解密以及签名校验
2019-04-21
java树转化成图_Java 转换一组数据为树型数据
2019-04-21
java 底层ppt_Java 如何设置 PPT 中的形状排列方式 具体内容
2019-04-21
mysql service5.7_Mysql5.7服务下载安装
2019-04-21
mysql 更新数据 字符串_批量替换 MySQL 指定字段中的字符串
2019-04-21
mysql concat 整数型_MySQL 数字类型转换函数(concat/cast)
2019-04-21
mysql单元格函数是_MySQL常用内置函数
2019-04-21
mysql 怎么字段分裂_你可以分裂/爆炸MySQL查询中的字段吗?
2019-04-21