使用 Vuex + Vue.js 构建单页应用【新篇】

crelaber 发布于2019-08-21 16:24 / 2921人阅读

摘要：使用构建单页应用新篇在去年的七月六号的时候，发布了一篇使用构建单页应用的文章，文章主要是介绍的基本使用方法，发现对大部分的入门同学有很大的帮助，时至今日还有很多同学不断的点赞与收藏，浏览量最高达到。

使用 Vuex + Vue.js 构建单页应用【新篇】

在去年的七月六号的时候，发布了一篇使用 Vuex + Vue.js 构建单页应用的文章，文章主要是介绍 vuex 的基本使用方法，发现对大部分的入门同学有很大的帮助，时至今日还有很多同学不断的点赞与收藏，浏览量最高达到 20.4K 。鉴于前端技术发展更新快速，特此在这里重新整理一篇 vue2.0 版本的 vuex 基本使用方法，希望能给更多刚入门或者将要入门的同学带来帮助。

这篇文章主要是介绍最新 vue2.0 API 的使用方法，和 vue1.x 的一些差异的地方。

阅读建议

1、在阅读这篇文章之前，我希望你已经阅读过我上一篇文章使用 Vuex + Vue.js 构建单页应用，明白我们需要实现的基本需求。

2、希望你阅读并掌握以下知识点

ECMAScript 6 入门

Vuex 是什么

vue2.0 官方文档

目录层级变化

首先是目录层级的变动，我们看下前后对比：

2.0 版本，vuex 的文件夹改为了 store

├── index.html
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   ├── Editor.vue
│   │   ├── NoteList.vue
│   │   └── Toolbar.vue
│   ├── main.js
│   └── store
│       ├── actions.js
│       ├── getters.js
│       ├── index.js
│       ├── mutation-types.js
│       └── mutations.js
└── static

1..0 版本

├── index.html
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   ├── Editor.vue
│   │   ├── NotesList.vue
│   │   └── Toolbar.vue
│   ├── main.js
│   └── vuex
│       ├── actions.js
│       ├── getters.js
│       └── store.js
└── static

使用方式的变动 在文件的 main.js 中注入，2.0 的注入方式如下

import Vue from "vue"
import App from "./App"
import store from "./store";

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: "#app",
  template: "",
  store,
  components: { App }
})

在组件中使用方式

我们来看 Editor.vue 组件内部如何使用 vuex 的

由于我们在入口文件 main.js 中已经注入 store 对象，使得我们能够在子组件中获取到它，在这里，我们使用了 vuex 提供的三个扩展方法 mapState、mapActions、mapGetters。

另外一个不同点是在我们的 NodeList.vue 组件中，在 vue2.0 里面已经移除了自带的过滤器函数，官方建议我们使用计算属性，下面是我们更改后的使用方法：

Q&A

其他的变动，大家自行的查看源码学习：vuex-notes-app2。

GPU云服务器云服务器单页应用单页应用cdn 单页应用程序 saas应用构建

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88503.html

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

摘要：鉴于该篇文章阅读量大，回复的同学也挺多的，特地抽空写了一篇下的使用方法，传送门使用构建单页应用新篇华丽的分割线原文地址前言在最近学习的时候，看到国外一篇讲述了如何使用和来构建一个简单笔记的单页应用的文章。鉴于该篇文章阅读量大，回复的同学也挺多的，特地抽空写了一篇 vue2.0 下的 vuex 使用方法，传送门：使用 Vuex + Vue.js 构建单页应用【新篇】 ---------...

tomorrowwu 2019-08-19 18:42 评论0 收藏0
使用 Vuex + Vue.js 构建单页应用

摘要：鉴于该篇文章阅读量大，回复的同学也挺多的，特地抽空写了一篇下的使用方法，传送门使用构建单页应用新篇华丽的分割线原文地址前言在最近学习的时候，看到国外一篇讲述了如何使用和来构建一个简单笔记的单页应用的文章。鉴于该篇文章阅读量大，回复的同学也挺多的，特地抽空写了一篇 vue2.0 下的 vuex 使用方法，传送门：使用 Vuex + Vue.js 构建单页应用【新篇】 ---------...

cnsworder 2019-08-01 15:25 评论0 收藏0
使用 Vuex + Vue.js 构建单页应用

摘要：鉴于该篇文章阅读量大，回复的同学也挺多的，特地抽空写了一篇下的使用方法，传送门使用构建单页应用新篇华丽的分割线原文地址前言在最近学习的时候，看到国外一篇讲述了如何使用和来构建一个简单笔记的单页应用的文章。鉴于该篇文章阅读量大，回复的同学也挺多的，特地抽空写了一篇 vue2.0 下的 vuex 使用方法，传送门：使用 Vuex + Vue.js 构建单页应用【新篇】 ---------...

levius 2019-08-29 10:58 评论0 收藏0
使用 Vuex + Vue.js 构建单页应用

摘要：鉴于该篇文章阅读量大，回复的同学也挺多的，特地抽空写了一篇下的使用方法，传送门使用构建单页应用新篇华丽的分割线原文地址前言在最近学习的时候，看到国外一篇讲述了如何使用和来构建一个简单笔记的单页应用的文章。鉴于该篇文章阅读量大，回复的同学也挺多的，特地抽空写了一篇 vue2.0 下的 vuex 使用方法，传送门：使用 Vuex + Vue.js 构建单页应用【新篇】 ---------...

UsherChen 2019-08-19 18:43 评论0 收藏0