nuxt项目中使用store
首先初始化创建一个nuxt项目
nuxt项目创建以后,内部已自动集成store,所以无需再单独安装和引入
在根目录的store文件夹下新建文件,例如home.js
//home.js
export const state = () => ({
age: 18
}) export const mutations = {
add(state, data) {
state.age += data
}
} export const actions = {
addAge(store, data) {
console.log(store);
setTimeout(() => {
store.commit('add', data)
console.log(store.state.age);
}, 2000)
}
} export const getters = { }
在页面中访问
methods: {
add() {
// this.$store.state.home.name;
// this.$store.commit("home/add", 2);
this.$store.dispatch("home/addAge", 2);
},
},
asyncData中访问
async asyncData ({ app, $axios, params, store }) {
return {
age:store.state.home.age
}
}
nuxt项目中使用store的更多相关文章
- nuxt 脚手架创建nuxt项目中不支持es6语法的解决方案
node本身并不支持es6语法,我们通常在vue项目中使用es6语法,是因为,我们使用babel做过处理, 为了让项目支持es6语法,我们必须同时使用babel 去启动我们的程序,所以再启动程序中加 ...
- nuxt项目中vue报错The client-side rendered virtual ...
报错: 翻译过来是: [Vue警告]:客户端呈现的虚拟DOM树与服务器呈现的内容不匹配.这可能是由不正确的HTML标记引起的,例如在其中嵌套块级元素或丢失.Bailing水化和执行完整的客户端渲染. ...
- Nuxt项目中通过ESlint命令行修复格式问题
在package.json文件中, 往往会有个类似于 "lint": "eslint --ext .js,.vue --ignore-path .gitignore .& ...
- 在nuxt项目中使用component组件
编写组件页面 1.在components下新建一个新建组件页面,如下所示 2.新建完成之后初始页面的代码如下所示: 3.下面从element-ui上找一个顶部导航菜单写到组件页面. <el-me ...
- nuxt项目打包上线,以及nuxt项目基础代码分享
nuxt的项目部署到线上环境,有多种方法,这里分享我使用的方法,一步步照着配置,就可以配置成功~ (1)项目先执行npm run build 打包好 (2)服务器安装node 和pm2依赖 服务器 ...
- 搭建Nuxt项目(搭配Element UI、axios)
使用Nuxt Nuxt.js文档:https://zh.nuxtjs.org/guide/ 开始 初始化Nuxt项目 npx create-nuxt-app <项目名> // or yar ...
- Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
vee-validate 是为 Vue.js 量身打造的表单校验框架,允许您校验输入的内容并显示对应的错误提示信息.它内置了很多常见的校验规则,可以组合使用多种校验规则,大部分场景只需要配置就能实现开 ...
- Extjs 项目中常用的小技巧,也许你用得着(5)--设置 Ext.data.Store 传参的请求方式
1.extjs 给怎么给panel设背景色 设置bodyStyle:'background:#ffc;padding:10px;', var resultsPanel = Ext.create('Ex ...
- Nuxt 项目性能优化调研
性能优化,这是面试中经常会聊到的话题.我觉得性能优化应该因具体场景而异,因不同项目而异,不同的手段不同的方案并不一定适合所有项目,当然这其中不乏一些普适的方案,比如耳熟能详的文件压缩,文件缓存,CDN ...
- 转 web项目中的web.xml元素解析
转 web项目中的web.xml元素解析 发表于1年前(2014-11-26 15:45) 阅读(497) | 评论(0) 16人收藏此文章, 我要收藏 赞0 上海源创会5月15日与你相约[玫瑰里 ...
随机推荐
- Codeforces 1132E(大数据多重背包)
题目链接 题意 给定背包容量$w$,体积分别为$1$到$8$的物体的数量求不超过背包容量的最大体积 思路 考虑将答案转化成$840 * x + y$的形式其中$840 = lcm(1-8), y &l ...
- 【面试题】JS 中这些继承方式你知道吗?
携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第 29 天,点击查看活动详情 问题描述 继承 是基于面向对象的,使用 继承 可以让我们更好的复用以前开发的代码,缩短开发的周期.提 ...
- 汇总-软件-分类:SSH客户端工具
官网-FinalShell 官网-Tabby GitHub-Tabby
- Centos 7.9 部署Kubernetes集群 (基于containerd 运行时)
前言 当Kubernetes社区宣布1.20版本之后会逐步弃用 dockershim ,当时也有很多自媒体在宣 传Kubernetes弃用Docker.其实,我觉得这是一种误导,也许仅仅是为了蹭热度. ...
- 如何使用命令行直接运行PHP脚本程序
在我的博客里有一些文章是和解码或者处理文件有关,其中有些自动化工作比较简单,使用了一些PHP程序来编写处理,这样写起程序来也比较快,因为是纯过程的任务,不想用C#来处理. 写完PHP的脚本程序后,保存 ...
- jquery获取文档的或某个元素的html 闲的没事凑活事的教学
// 获取文档的 // 这个是获取本文档可能被扩展插件和广告屏蔽器污染的html $(":root").prop("outerHTML"); // 利用prom ...
- Spring Boot 开启后缀匹配模式
项目原有 Java 配置为继承 WebMvcConfigurationSupport, 而WebMvcConfigurationSupport#requestMappingHandlerMapping ...
- CSP202104-4 校门外的树
设状态时,首先从简单状态设起: 一维不行再试二维.简单状态应付不了再设复杂的(因为某些状态可以体现在状态转移的过程中,或者说状态转移方程中,不一定体现在原式中) E.g. 计算机软件能力认证考试系统- ...
- 自己写的java教程,免费分享
自己写的一套java教程,主要用于内部培训使用,有需要的可以直接免费下载: http://it.zhenzikj.com/download/java.zip 一共写了3套: java语言基础.网络开发 ...
- Linux df -h 显示磁盘空间满,但实际未占用满——问题分析
问题现象: 遇到一个问题,在系统上,告警提示磁盘空间不够,如下图所示: 问题分析: 1.首先使用 :du -h / --max-depth=1 命令查看各个目录的占用空间,试图找到占用较多空间的目 ...