小白入门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。

init

  • 看一下项目是否搭建成功–>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添加下面代码,具体见注释。
  • 运行结果。
    结果

转载地址:https://blog.csdn.net/qq_39811414/article/details/107143827 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:Windows安装SSH连接远程服务器以及文件下载
下一篇:【最新】小白通过nginx部署vue项目到CentOS

发表评论

最新留言

哈哈,博客排版真的漂亮呢~
[***.90.31.176]2024年03月14日 06时13分52秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

python房价数据分析波士顿代码数据_python数据分析-波士顿房价预测-Go语言中文社区... 2019-04-21
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 net 安卓_android -------- java.net.UnknownServiceException 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-查看运行的线程-SHOW PROCESSLIST 2019-04-21
mysql 更新数据 字符串_批量替换 MySQL 指定字段中的字符串 2019-04-21
web开发 mysql安装_mysqlinstallerwebcommunity5.7.21.0.msi安装图文教程 2019-04-21
mysql concat 整数型_MySQL 数字类型转换函数(concat/cast) 2019-04-21
mysql单元格函数是_MySQL常用内置函数 2019-04-21
mysql 怎么字段分裂_你可以分裂/爆炸MySQL查询中的字段吗? 2019-04-21
mysql server卸载出错_Mysql卸载问题Start Server卡住报错解决方法 2019-04-21