首先初始化创建一个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的更多相关文章

  1. nuxt 脚手架创建nuxt项目中不支持es6语法的解决方案

    node本身并不支持es6语法,我们通常在vue项目中使用es6语法,是因为,我们使用babel做过处理, 为了让项目支持es6语法,我们必须同时使用babel 去启动我们的程序,所以再启动程序中加 ...

  2. nuxt项目中vue报错The client-side rendered virtual ...

    报错: 翻译过来是: [Vue警告]:客户端呈现的虚拟DOM树与服务器呈现的内容不匹配.这可能是由不正确的HTML标记引起的,例如在其中嵌套块级元素或丢失.Bailing水化和执行完整的客户端渲染. ...

  3. Nuxt项目中通过ESlint命令行修复格式问题

    在package.json文件中, 往往会有个类似于 "lint": "eslint --ext .js,.vue --ignore-path .gitignore .& ...

  4. 在nuxt项目中使用component组件

    编写组件页面 1.在components下新建一个新建组件页面,如下所示 2.新建完成之后初始页面的代码如下所示: 3.下面从element-ui上找一个顶部导航菜单写到组件页面. <el-me ...

  5. nuxt项目打包上线,以及nuxt项目基础代码分享

    nuxt的项目部署到线上环境,有多种方法,这里分享我使用的方法,一步步照着配置,就可以配置成功~ (1)项目先执行npm run build 打包好   (2)服务器安装node 和pm2依赖 服务器 ...

  6. 搭建Nuxt项目(搭配Element UI、axios)

    使用Nuxt Nuxt.js文档:https://zh.nuxtjs.org/guide/ 开始 初始化Nuxt项目 npx create-nuxt-app <项目名> // or yar ...

  7. Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验

    vee-validate 是为 Vue.js 量身打造的表单校验框架,允许您校验输入的内容并显示对应的错误提示信息.它内置了很多常见的校验规则,可以组合使用多种校验规则,大部分场景只需要配置就能实现开 ...

  8. Extjs 项目中常用的小技巧,也许你用得着(5)--设置 Ext.data.Store 传参的请求方式

    1.extjs 给怎么给panel设背景色 设置bodyStyle:'background:#ffc;padding:10px;', var resultsPanel = Ext.create('Ex ...

  9. Nuxt 项目性能优化调研

    性能优化,这是面试中经常会聊到的话题.我觉得性能优化应该因具体场景而异,因不同项目而异,不同的手段不同的方案并不一定适合所有项目,当然这其中不乏一些普适的方案,比如耳熟能详的文件压缩,文件缓存,CDN ...

  10. 转 web项目中的web.xml元素解析

    转 web项目中的web.xml元素解析 发表于1年前(2014-11-26 15:45)   阅读(497) | 评论(0) 16人收藏此文章, 我要收藏 赞0 上海源创会5月15日与你相约[玫瑰里 ...

随机推荐

  1. linux安装datax +datax-web踩坑总结

    一丶安装datax 环境:JDK8+     py2.7+ 下载地址:http://datax-opensource.oss-cn-hangzhou.aliyuncs.com/datax.tar.gz ...

  2. 容器 之搭建 jenkins ci 平台

    1 部署 gitlab docker run -d \ --name gitlab \ -p 8443:443 \ -p 80:80 \ -p 9998:22 \ -v $PWD/config:/et ...

  3. Linux安装Nginx安装并配置stream

    编译安装 1.下载可编译的nginx cd /opt wget http://nginx.org/download/nginx-1.20.1.tar.gz tar -zxvf nginx-1.20.1 ...

  4. git如何把本地文件夹和远程仓库关联

    场景: 1,有一个本地项目,没有上传到git过,你在远程新建了一个仓库,想把这个本地的代码推送到该仓库 2,直接想把本地代码推送到远程并创建该本地文件对应的仓库(这种情况不可以实现) 解决方法: 本地 ...

  5. Java基础学习:12、类变量和类方法(静态变量/方法)

    一.类变量: 1.定义:类变量也叫静态变量,是该类所有对象(一个类可以new多个对象)共享的一个变量,任何一个该类变量去访问它时,取到的都是相同的值,同样一个该类的对象去修改它时,修改的也是同一个变量 ...

  6. 17.SQLite数据库存储

    Android系统内置一个SQLite数据库,SQLite是一款轻量级的关系型数据库,它的运算速度非常快,占用资源很少,通常只需要几百K的内存就足够了. SQLite不仅支持标准的SQL语法,还遵循了 ...

  7. GIS空间分析和建模复习重点3

    22.网络分析的相关算法 (1)Dijkstra算法(求解给定点与其他所有点之间的最短路径即单源点最短路径问题) (2)Floyd算法(直接计算任意两节点之间最短路) (3)最小生成树即Prim算法. ...

  8. 安装nginx依赖库

    nginx安装headers-more-nginx-module,推荐下面这篇贴,步骤简洁明了,本人ubutu18.0.04版本一次性安装成功: https://www.jianshu.com/p/8 ...

  9. 【阿里云ACP】-01(阿里云综述、弹性计算)

    课程能力 课程范围 ECS 磁盘 实例 磁盘 快照 镜像 网络 安全组 AS 伸缩组 伸缩配置 伸缩规则 伸缩活动 伸缩触发任务 伸缩模式 冷却时间 SLB 定义 实现原理 支持的协议 绘画保持 健康 ...

  10. AndroidStudio 集成kotlin,以及Kotlin-gradle-plugin-1.5.0.jar 下载失败

    配置Kotlin buildscript { ext.kotlin_version = '1.5.0' repositories { maven{url 'http://maven.aliyun.co ...