You add array of todos to the store simply by adding them to the state defined in your store/index.js file. You can access the array of todos using mapState then loop through and display them with v-for. This lesson walks you through the process of setting up todos in Vuex and displaying them in your Vue.js template.

store/index.js:

import Vuex from 'vuex'

const store = () => new Vuex.Store({
state: {
todos: [
{task: 'eat'},
{task: 'sleep'},
{task: 'code'}
]
}
}) export default store

pages/index.vue:

<template>
<article class="pa3 pa5-ns">
<ul class="list pl0 ml0 center mw6 ba b--light-silver br2">
<li v-for="todo of todos" class="ph3 pv3 bb b--light-silver">{{todo.task}}</li>
</ul>
</article>
</template> <script>
import { mapState } from 'vuex' export default {
computed: {
...mapState({
todos: (state) => state.todos
})
}
}
</script>

[Nuxt] Add Arrays of Data to the Vuex Store and Display Them in Vue.js Templates的更多相关文章

  1. Vue.js中学习使用Vuex详解

    在SPA单页面组件的开发中 Vue的vuex和React的Redux 都统称为同一状态管理,个人的理解是全局状态管理更合适:简单的理解就是你在state中定义了一个数据之后,你可以在所在项目中的任何一 ...

  2. 使用 Vuex + Vue.js 构建单页应用

    鉴于该篇文章阅读量大,回复的同学也挺多的,特地抽空写了一篇 vue2.0 下的 vuex 使用方法,传送门:使用 Vuex + Vue.js 构建单页应用[新篇] ------------------ ...

  3. [Nuxt] Use Vuex Actions to Delete Data from APIs in Nuxt and Vue.js

    You'll begin to notice as you build out your actions in Vuex, many of them will look quite similar. ...

  4. [Nuxt] Build a Vue.js Form then use Vuex Actions to Post to an API in Nuxt

    The default behavior of submitting an HTML form is to reload the page. You can use the Vue.js @submi ...

  5. 解决: DeprecationWarning: Passing 1d arrays as data is deprecated in 0.17 and will raise ValueError in 0.19

    错误信息:C:\Python27\lib\site-packages\sklearn\utils\validation.py:395: DeprecationWarning: Passing 1d a ...

  6. 解决如下出错:DeprecationWarning: Passing 1d arrays as data is deprecated in 0.17 and willraise ValueError in 0.19.

    背景:在Spyder中写几行脚本,目的是应用sklearn自带的svm(支持向量机)算法,来对其自带的digits(手写体数字)数据集进行分类,过程包括训练阶段和预测阶段.将手写体数字数据的特征数据d ...

  7. [Nuxt] Update Vuex State with Mutations and MapMutations in Vue.js

    You commit changes to state in Vuex using defined mutations. You can easily access these state mutat ...

  8. Vue.js 系列教程 4:Vuex

    这是关于 JavaScript 框架 Vue.js 五个教程的第四部分.在这一部分,我们会学习使用 Vuex 进行状态管理. 这不是一个完整的指南,而是基础知识的概述,所以你可以了解 Vue.js 以 ...

  9. vue.js移动端app实战3:从一个购物车入门vuex

    什么是vuex? 官方的解释是:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 简单来说就 ...

随机推荐

  1. QQ 特效学习 二 侧滑删除

    上篇文章: http://www.cnblogs.com/xurui1995/p/5798631.html 今天来写不仅是qq而且在别的软件上也特别流行的侧滑删除 其实套路和前篇的一样,一个自定义Vi ...

  2. #学习记录#——CSS content 属性

    CSS content 属性常结合:before 和:after 这两个伪类一起使用,给指定的元素添加内容来丰富页面. 1. 添加文本内容 html: <h1>给末尾添加内容. </ ...

  3. Android Retrofit+RxJava 优雅的处理服务器返回异常、错误

    标签: 开始本博客之前,请先阅读: Retrofit请求数据对错误以及网络异常的处理 异常&错误 实际开发经常有这种情况,比如登录请求,接口返回的 信息包括请求返回的状态:失败还是成功,错误码 ...

  4. vue2细节变化的用法

    1.v-el和v-ref合并为一个属性:ref 原来:v-el:my-element 现在: ref="myElement", v-ref:my-component 变成了这样:  ...

  5. 安卓View的缓冲机制

    View组件显示的内容能够通过cache机制保存为bitmap, 主要有下面方法: void  setDrawingCacheEnabled(boolean flag),  Bitmap  getDr ...

  6. CSS布局篇——固宽、变宽、固宽+变宽

    学了前端挺久了.近期写一个项目測试系统,布局时发现自己对变宽+固宽的布局还没有全然掌握,所以在这里总结一下,以后须要的时候回头看看. 1.最简单的当然是一列或多列固宽 比如两列固宽: <1> ...

  7. Linux下搭建JSP环境

    Linux下搭建JSP环境     作为一名Java EE系统架构工程师,经常需要搭配和建立JSP(Java Server Pages)的开发环境和运行环境,所以本人在平时的工作中积累了一些在Linu ...

  8. div的标准盒模型和怪异盒模型

    (1)标准盒模型 标准盒模型宽高不会被padding和margin撑开 (2)怪异盒模型 怪异盒模型宽高会被padding和margin撑开

  9. BZOJ2118: 墨墨的等式(最短路构造/同余最短路)

    Description 墨墨突然对等式很感兴趣,他正在研究a1x1+a2y2+…+anxn=B存在非负整数解的条件,他要求你编写一个程序,给定N.{an}.以及B的取值范围,求出有多少B可以使等式存在 ...

  10. Servlet 规范笔记—基于http协议的servlet

    在上一章节,我们大概的描述了servlet的规范以及servlet和servlet容器的概念和用途,我们清楚的知道servlet容器提供了接收来自client端的请求,然后根据请求进行处理(如:执行对 ...