
小白入门Vuex
发布日期:2022-02-17 02:39:46
浏览次数:20
分类:技术文章
本文共 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 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
感谢大佬
[***.8.128.20]2023年05月27日 10时11分23秒
关于作者

喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
最新文章
FileZilla 下载
2020-02-17 13:46:45
FileUtils
2020-02-17 13:46:41
Filesystem registries 使用示例
2020-02-17 13:46:37
FileNotFoundException: /storage/emulated/0/Pictures/1582: open failed: EACCES (Permission denied)
2020-02-17 13:46:33
filecoin python 离线地址生成和离线签名实现
2020-02-17 13:46:29
filebeat+kafka+logstash 详细配置
2020-02-17 13:46:25
Filebeat+kafka+logstash 多路径日志收集
2020-02-17 13:46:21
filebeat close_* 配置
2020-02-17 13:46:17
File->FileBuffer->ImageBuffer
2020-02-17 13:46:12
fight1
2020-02-17 13:46:08
Field, Property, Attribute
2020-02-17 13:46:04
Field in com.XXX required a bean of type that could not be found
2020-02-17 13:46:00
fidller抓包教程
2020-02-17 13:45:56
fiddler无法抓取chrome解决方法
2020-02-17 13:45:52
fiddler抓取不到python-request的包?InsecureRequestWarning: Unverified HTTPS request is being made to host '
2020-02-17 13:45:48
Fiddler抓取HTTPS最全(强)攻略....
2020-02-17 13:45:43
fiddler抓包PC微信小程序失败的解决方案
2020-02-17 13:45:39
fiddler之打断点
2020-02-17 13:45:35
Fiddler4的下载与安装
2020-02-17 13:45:31
Fiddler-过滤器、断点应用、弱网/限速测试
2020-02-17 13:45:27