Install:

npm install -g vue-cli

Init project:

vue init nuxt/starter .

Run:

npm run dev

Create a index.js file inside store folder:

import Vuex from 'vuex'

const store = () => new Vuex.Store({
state: {
counter: 0
}
}) export default store

Display the counter inside pages/index.vue:

<template>
<div>
Counter: {{counter}}
</div>
</template> <script>
import { mapState } from 'vuex' export default {
computed: mapState({
counter: (state) => state.counter
})
}
</script>

mapState: return a state tree object.

We can also write:

    computed: {
...mapState({
counter: (state) => state.counter
})
}

[Nuxt] Setup a "Hello World" Server-Rendered Vue.js Application with the Vue-CLI and Nuxt的更多相关文章

  1. Vue.js系列(一):Vue项目创建详解

    引言 Vue.js作为目前最热门最具前景的前端框架之一,其提供了一种帮助我们快速构建并开发前端项目的新的思维模式.本文旨在帮助大家认识Vue.js,并详细介绍使用vue-cli脚手架工具快速的构建Vu ...

  2. Vue.js是什么,vue介绍

    Vue.js是什么,vue介绍 Vue.js 是什么Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用. ...

  3. 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能

    大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...

  4. 【Vue.js游戏机实战】- Vue.js实现大转盘抽奖总结

    大家好!先上图看看本次案例的整体效果. 实现思路: Vue component实现大转盘组件,可以嵌套到任意要使用的页面. css3 transform控制大转盘抽奖过程的动画效果. 抽奖组件内使用钩 ...

  5. 【Vue.js游戏机实战】- Vue.js实现九宫格水果机抽奖游戏总结

    大家好!先上图看看本次案例的整体效果. 完整版实战课程附源码:[Vue.js游戏机实战]- Vue.js实现九宫格水果机抽奖 实现思路: Vue component实现九宫格水果机组件,可以嵌套到任意 ...

  6. 【Vue.js游戏机实战】- Vue.js实现老虎-机抽奖总结

    大家好!先上图看看本次案例的整体效果. 完整版实战课程附源码:[Vue.js游戏机实战]- Vue.js实现老虎-机抽奖 实现思路: Vue component实现老虎-机组件,可以嵌套到任意要使用的 ...

  7. Vue.js 第1章 Vue常用指令学习

    今日目标 能够写出第一个vue应用程序 能够接受为什么需要学vue 能够使用指令 能够通过指定完成简单的业务(增加删除查询) 能够理解mvvm 为什么要学习vue 企业需要 可以提高开发效率 实现vu ...

  8. Vue.js教程 2.体验Vue

    Vue.js教程 2.体验Vue <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  9. vue.js随笔记---初识Vue.js

    1.基础要求: 1.1 HTML CSS JAVASCRIPT 1.2 模块化基础 1.3 Es6初步了解 2.vue.js 轻量级的MVVM模式框架,他同时吸收了recat和angular的优点,他 ...

  10. Js 框架之Vue .JS学习记录 ① 与Vue 初识

    目录 与 Vue.js 认识 VUE.JS是个啥?有啥好处? Vue 的目标 战前准备  VUE.JS环境 VUE.JS 尝试一下,你就明白 第一步 实例化VUE 对象 第二步VueAPP 调用数据 ...

随机推荐

  1. npm更新方法

    今天npm的版本更新发现小于3.0 尝试了npm install npm -g 安装么有成功换成了 cnpm install npm -g安装之后就可以

  2. WHU 1470 Join in tasks 水题

    http://acm.whu.edu.cn/land/problem/detail?problem_id=1470 大概是给你一个队列,每次移动队头的数到队尾并减1,如果本身这个数为1就删去. 然后a ...

  3. AtCoderACGC001C Shorten Diameter

    Description: 给定一个\(n\)个点的树,要求删去最少的点使树的致直径不超过k Solution: 如果\(k\)为偶数,对于最终状态一定是以每一个点为根任何点的深度不能超过\(k/2\) ...

  4. logout命令用于退出当前登录的Shell

    logout命令用于退出当前登录的Shell

  5. 洛谷 P1459 三值的排序 Sorting a Three-Valued Sequence

    P1459 三值的排序 Sorting a Three-Valued Sequence 题目描述 排序是一种很频繁的计算任务.现在考虑最多只有三值的排序问题.一个实际的例子是,当我们给某项竞赛的优胜者 ...

  6. [Angular & Unit Testing] Automatic change detection

    When you testing Component rendering, you often needs to call: fixture.detectChanges(); For example: ...

  7. web前端响应式布局,自适应全部分辨率

    写phpd的我. 近期公司要弄个app关键是没有web开发,而我有比較闲,那就扛枪上阵吧. 响应式布局,web端的?php我一直都是用tp框架,对于web首先想到的是bootstrap框架.仅仅是简单 ...

  8. NB大了,增强现实走进安防行业了!竟然还有智能家居的规划!

     增强现实系统故事性功能解说 作者:李欢   工号:2288  电话:18938902295 邮箱:lihuan@gosuncn.com 前言: 本文仅适用于2014北京安防展,增强现实展区人员学 ...

  9. 自定义控件学习——下拉刷新ListView

    效果 开始用Android Studio写了,还有挺多不明白这IDE用法的地方....蛋疼 主要思路 1. 添加了自定义的头布局    2. 默认让头布局隐藏setPadding.设置 -自身的高度  ...

  10. Day2平衡树笔记

    线段树不支持的操作:删除,插入 常见的平衡树 treap 慢||好写 sbt(大小平衡的树) 非常快 比较好写 ||功能不全 rbt 红黑树 特别快 || 非常难写   以上操作支持插入删除O(Nlo ...