Vuex 是什么?

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能

  • 多个视图依赖于同一状态。
  • 来自不同视图的行为需要变更同一状态。

对于问题一,传参的方法对于多层嵌套的组件将会非常繁琐,并且对于兄弟组件间的状态传递无能为力。

对于问题二,我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱,通常会导致无法维护的代码。

借鉴了 Flux、Redux 和 The Elm Architecture。与其他模式不同的是,Vuex 是专门为 Vue.js 设计的状态管理库,以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。

如果您的应用够简单,您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是,如果您需要构建一个中大型单页应用,您很可能会考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的选择。

store

主要分为5个模块

  • state: 存储数据

  • getter: 获取store 属性方法

  • mutatuon: 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation,类似于事件。

  • action: Action 提交的是 mutation,而不是直接变更状态。

  • module:模块化

  1. state
const state = {
title: 'doubanMovie', // 标题
movingList: { // 列表
subjects: []
},
}
复制代码
  1. getter: 可以认为是 store 的计算属性 mapGetters 辅助函数
export const getters = {
title: state => {
return state.title
},
movingList: state => {
for (let subject of state.movingList.subjects) {
subject.rating.average = subject.rating.average / 2
}
return state.movingList
}
}
复制代码
  1. mutatuin

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数: mutation 都是同步事务

import * as types from './types' //常量 类名
export const mutations = {
[types.MOVING_TITLE] (state, {title}) {
state.title = title
},
[types.MOVING_LIST] (state, {list}) {
state.movingList = list
},
}
复制代码

使用常量替代 mutation 事件类型在各种 Flux 实现中是很常见的模式。

  1. action: Action 类似于 mutation,不同在于:
  • Action 提交的是 mutation,而不是直接变更状态。
  • Action 可以包含任意异步操作。
export const actions = {
/**
* 获取列表
* @param commit
*/
getMoving ({commit, state}) {
utils.get('/movie/in_theaters', {city: state.city}).then(res => {
commit('MOVING_LIST', {list: res})
commit('MOVING_LOADING', {loading: false})
})
}
}
复制代码

Action 通过 store.dispatch 方法触发:分发 store.dispatch('increment')

  1. module Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割:
const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
} const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... }
} const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
}) store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态
复制代码

项目结构 (只是推荐)

  1. 应用层级的状态应该集中到单个 store 对象中。

  2. 提交 mutation 是更改状态的唯一方法,并且这个过程是同步的。

  3. 异步逻辑都应该封装到 action 里面。

对于大型应用,会希望把 Vuex 相关代码分割到模块中。下面是项目结构示例:

├── index.html
├── main.js
├── api
│ └── ... # abstractions for making API requests
├── components
│ ├── App.vue
│ └── ...
└── store
├── index.js # where we assemble modules and export the store
├── actions.js # root actions
├── mutations.js # root mutations
└── modules
├── cart.js # cart module
└── products.js # products module

作者:o逍遥生o
链接:https://juejin.im/post/5ceb85f1e51d4556db69498d
来源:掘金

Vue全家桶之——Vuex的更多相关文章

  1. vue 项目实战 (vue全家桶之--- vuex)

    老规矩先安装 npm install vuex --save 在看下面内容之前 你应该大概的看了一边vuex官方的文档对vuex有个大概对了解 首先 vuex 是什么? vuex 是属于vue中的什么 ...

  2. vue学习(十二)vue全家桶 Vue-router&Vuex

    一 vue-router的安装 二 vue-router的基本使用 三 命名路由 四 动态路由的匹配和路由组件的复用 一 vue-router的安装 NPM npm install vue-route ...

  3. 从零开始系列之vue全家桶(3)安装使用vuex

    什么是vuex? vuex:Vue提供的状态管理工具,用于同一管理我们项目中各种数据的交互和重用,存储我们需要用到数据对象. 即data中属性同时有一个或几个组件同时使用,就是data中共用的属性. ...

  4. 【实战】Vue全家桶(vue + axios + vue-router + vuex)搭建移动端H5项目

    使用Vue全家桶开发移动端页面. 本博文默认已安装node.js. github链接 一.准备工作 安装vue npm install vue 安装脚手架vue-cli npm install -g ...

  5. 用 Vue 全家桶二次开发 V2EX 社区

    一.开发背景 为了全面的熟悉Vue+Vue-router+Vuex+axios技术栈,结合V2EX的开放API开发了这个简洁版的V2EX. 在线预览 (为了实现跨域,直接npm run dev部署的, ...

  6. Vue全家桶

    简介 “简单却不失优雅,小巧而不乏大匠”. Vue.js 是一个JavaScriptMVVM库,是一套构建用户界面的渐进式框架.它是以数据驱动和组件化的思想构建的,采用自底向上增量开发的设计. 为什么 ...

  7. 使用vue全家桶制作博客网站

    前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用vue全家桶制作的博客网站 概述 该项目是基于vue全家桶(vue.vue-router.vuex.v ...

  8. 转载: 使用vue全家桶制作博客网站 HTML5 移动网站制作的好教程

    使用vue全家桶制作博客网站   前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用vue全家桶制作的博客网站 概述 该项目是基于vue全家桶(vue. ...

  9. Vue全家桶介绍

    一直不清楚全家桶是什么玩意,上网搜了一下,才知道就是平时项目中使用的几个依赖包,下面分享一下 Vue 全家桶介绍 Vue有著名的全家桶系列,包含了vue-router(http://router.vu ...

随机推荐

  1. Java的设计模式(6)— 模板模式

    定义一个操作中算法的骨架,将一些步骤放在子类实现,使得子类可以不改变一个算法结构即子类可以重定义该算法的某些特定步骤. 主要有两个角色: 1. 抽象模板 :是一个抽象类,并实现了一个具体模板方法,这个 ...

  2. css特效实现透明渐变

    知乎发现栏目上的标题图一般都是以下图方式展现的,很显然它是利用渐变去实现的.思路很有意思,主要是要有两方面的认知: 这张图其实可以分成两部分,右边控制图形和渐变,左边就是一张纯色背景,和渐变无关 透明 ...

  3. python 的django项目复制方法

    python 的django项目复制方法 django_pyecharts_1修改为django_pyecharts_1_cs1.拷贝项目(确保原有项目是关闭状态下)2.粘贴项目并删除idea文件夹和 ...

  4. Linux中光标消失解决办法

    假如Linux下光标消失,不要急: echo -e "\033[?25l"  隐藏光标 echo -e "\033[?25h" 显示光标 (转载自:https: ...

  5. show processlist说明

    mysql> show processlist; 有时候输出太多,可以用下面的语句代替 mysql> select * from information_schema.processlis ...

  6. (转)FFMPEG类库打开流媒体的方法(需要传参数的时候)

    本文链接:https://blog.csdn.net/leixiaohua1020/article/details/14215393 使用ffmpeg类库进行开发的时候,打开流媒体(或本地文件)的函数 ...

  7. P1777 帮助_NOI导刊2010提高(03)

    也许更好的阅读体验 \(\mathcal{Description}\) Bubu的书架乱成一团了!帮他一下吧! 他的书架上一共有n本书.我们定义混乱值是连续相同高度书本的段数.例如,如果书的高度是30 ...

  8. Consul作为SpringCloud配置中心

    一.背景介绍 在分布式系统中动态配置中,可以避免重复重启服务,动态更改服务参数等.一句话非常重要. 另外一篇文章也是这样说的,哈哈. Consul 作为Spring 推荐的分布式调度系统其也具备配置中 ...

  9. 怎样检测浏览器是否安装了某个插件, 比如flash

    首先, 我们可以获取浏览器安装的所有在插件: navigator.plugins 它会返回一个类似数组的对象, 包含所有已安装插件的具体信息. navigator.plugins; 然后我们可以通过正 ...

  10. springmvc+mybatis的增删改查入门

    先到官网了解mybatis的语法:https://mybatis.org/mybatis-3/zh/sqlmap-xml.html 前端用了thymeleaf和vue.js,效果图和demo地址:ht ...