一、定义

Vuex是一个专为Vue.js应用程序开发的状态管理模式。

状态管理模式

简单的demo

new Vue({
// state
data () {
return {
count: 0
}
},
// view
template: `
<div>{{ count }}</div>
`,
// actions
methods: {
increment () {
this.count++
}
}
})
  • state,驱动应用的数据源;
  • view,以声明方式将state映射到视图;
  • actions,响应在view上的用户输入导致的状态变化。

二、产生背景

“单向数据流”理念的极简示意图如下:

产生问题:

但是,当应用遇到多个组件共享状态时,单向数据流的简洁性很容易被破坏:

问题一:多个视图依赖于同一状态。

问题二:来自不同视图的行为需要变更同一状态。

通常做法:

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

对于问题二,我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。

以上的这些模式非常脆弱,通常会导致无法维护的代码。

解决方案:

vuex:  把组件的共享状态抽取出来,以一个全局单例模式管理

在这种模式下,我们的组件树构成了一个巨大的“视图”,不管在树的哪个位置,任何组件都能获取状态或者触发行为!

vuex机制图

三、详解

每一个Vuex应用得核心就是store(仓库)。
store保存着应用中大部分的状态

与全局变量区别: 
1.Vuex的状态存储是响应式的。store里的状态发生变化,则vue组件内部的状态也会发生变化。 
2.不能直接改变store中的状态。唯一改变store中的状态途径就是显式地提交(commit)mutations。这样使得我们可以方便得跟踪每个状态的变化。

vuex完整、简单使用demo

<div id="app">
<span>{{count}}</span>
<button @click="increment">+</button>
<button @click="decrement">-</button>
</div>
<script>
import vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex) // 注册插件 // 实例化vuex const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment: state => state.count++,
decrement: state => state.count--
}
}) new Vue({//实例化vue
el: '#app',
computed: {
count () {
return store.state.count
}
},
methods: {
increment () {
store.commit('increment')
},
decrement () {
store.commit('decrement')
}
}
})
</script>

State

<div id="app">
<span>{{count}}</span>
</div>
<script>
import vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex) // 注册插件 const store = new Vuex.Store({
state: {
count: 0
}
}) // 子组件
const Counter = {
template: `<div>{{ count }}</div>`,
computed: {
count () {
return this.$store.state.count // 各子组件可以通过this.$store来访问这个store实例
}
}
}
// Vuex通过store选项,提供了一种机制将状态从根组件注入到每个子组件中
const app = new Vue({
el: '#app',
store, // 把 store 对象提供给 “store” 选项,这可以把 store 的实例注入所有的子组件
components: { Counter },
template: `
<div class="app">
<counter></counter>
</div>
`
})
</script>

mapState 辅助函数

当一个组件需要获取多个状态时候使用,mapState 辅助函数帮助生成计算属性

// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex' export default {
// ...
computed: mapState({
// 箭头函数可使代码更简练
count: state => state.count, // 传字符串参数 'count' 等同于 `state => state.count`
countAlias: 'count', // 为了能够使用 `this` 获取局部状态,必须使用常规函数,不能使用箭头函数
countPlusLocalState (state) {
return state.count + this.localCount
}
})
}

当映射的计算属性的名称与 state 的子节点名称相同时(count: state => state.count),我们也可以给 mapState 传一个字符串数组。

computed: mapState([
// 映射 this.count 为 store.state.count
'count'
])

mapState 函数返回的是一个对象。通过使用对象展开运算符“ ... ” 将它与局部计算属性混合使用,将多个对象合并为一个,并将最终对象传给 computed 属性

computed: {
localComputed () { /* ... */ }, // 局部计算属性
// 使用对象展开运算符将此对象混入到外部对象中
...mapState({
// ...
})
}

Getters

需要从store中的state中派生出一些状态, 例如对列表进行过滤并计数

Vuex允许我们在store中定义【getters】(可以认为是store的计算属性)。 
Getters接受state作为其第一个参数:

const store = new Vuex.Store({
state: {
todos: [
{id: 1, text: 'xxx', done: true}
]
},
getters: {
doneTodos: state => {
return state.todos.filter(todo => todo.done)
}
}
})
new Vue({//实例化vue
el: '#app',
computed: {
doneTodos () {
return store.getters.doneTodos // -> [{ id: 1, text: 'xxx', done: true }]
    } 
}
})

Vuex 学习笔记一的更多相关文章

  1. Vuex 学习笔记

    Vuex 是什么? Vuex 是一个专为 Vue.js应用程序开发的状态管理模式.由于SPA应用的模块化,每个组件都有它各自的数据(state).视图(view)和方法(actions),当项目内容越 ...

  2. vuex学习笔记

    一.vuex的目的 把组件的共享状态抽取出来,以一个全局单例模式管理.在这种模式下,组件树构成了一个巨大的视图,不管在树的哪个位置,任何组件都能获取状态或触发行为. 二.vuex集中式管理数据 安装 ...

  3. Vuex学习笔记(-)安装vuex

    什么是Vuex? vuex是一个专门为vue.js应用程序开发的状态管理模式.即data中属性同时有一个或几个组件同时使用,就是data中共用的属性. 安装vuex(前提是已经安装好vue-cli脚手 ...

  4. Vue学习—— Vuex学习笔记

    组件是Vue最强大的功能之一,而组件实例的作用域是相互独立的,意味着不同组件之间的数据是无法相互使用.组件间如何传递数据就显得至关重要,这篇文章主要是介绍Vuex.尽量以通俗易懂的实例讲述这其中的差别 ...

  5. 【整理】解决vue不相关组件之间的数据传递----vuex的学习笔记,解决报错this.$store.commit is not a function

    解决vue不相关组件之间的数据传递----vuex的学习笔记,解决报错this.$store.commit is not a function https://www.cnblogs.com/jaso ...

  6. 【Vue学习笔记】—— vuex的语法 { }

    学习笔记 作者:o_Ming vuex Vuex ++ state ++ (用于存储全局数据) 组件访问 state 中的全局数据的方式1: this.$store.state.全局数据 组件访问 s ...

  7. 7 种 Javascript 常用设计模式学习笔记

    7 种 Javascript 常用设计模式学习笔记 由于 JS 或者前端的场景限制,并不是 23 种设计模式都常用. 有的是没有使用场景,有的模式使用场景非常少,所以只是列举 7 个常见的模式 本文的 ...

  8. vuex学习详细解(主页目录

    学习vuex过程中,通过 vue-cli命令来配置和使用vuex笔记整理 vue-cli中配置vuex流程和注意事项 vuex目录配置 vuex的states.js vuex的getters.js v ...

  9. Vue学习笔记-Vue.js-2.X 学习(四)===>脚手架Vue-CLI(基本工作和创建)

    (五) 脚手架Vue-CLI 一 Vue-CLI前提(nodejs和webpack) 二  Vue学习-nodejs按装配置,Node.js 就是运行在服务端的 JavaScript. 1. 去nod ...

随机推荐

  1. SQL 多表查询的几种连接方式

    --创建数据库 create database GoodsSystem go --使用数据库 use GoodsSystem go --创建商品类型表 create table GoodsType ( ...

  2. C++ Boost库的编译及使用

    https://www.jianshu.com/p/de1fda741beb https://www.cnblogs.com/weizhixiang/p/5804778.html Windows编译 ...

  3. 【转】python---方法解析顺序MRO(Method Resolution Order)<以及解决类中super方法>

    [转]python---方法解析顺序MRO(Method Resolution Order)<以及解决类中super方法> MRO了解: 对于支持继承的编程语言来说,其方法(属性)可能定义 ...

  4. RocketMQ 创建和删除 topic,以及 broker 和 nameserver 之间的心跳

    命令行主类:org.apache.rocketmq.tools.command.MQAdminStartup 客户端创建 topic 程序参数:updateTopic -n localhost:987 ...

  5. VUE 全局监听sessionStorage变化

    在做项目的时候,可能需要在其他模块获取推送的信息或者变量,但是数据量或者说数目少,而且项目中也没有引用VUEX,那么可以下手的方法之一也就是sessionStorage类的浏览器存储了. 首先在全局的 ...

  6. CentOS 6 安装Syslog-ng

    entOS 6 安装 Syslog-ng 一. yum 安装 syslog-ng3.7.1 是专门用于RHEL/CentOS version 6 ,不要安装成其他版本.亲身经历,安装成syslog-n ...

  7. JDBC 国际标准时间

    mysql.driver=com.mysql.cj.jdbc.Drivermysql.url=jdbc:mysql://localhost:3306/XXXX?characterEncoding=UT ...

  8. layui的分页使用(前端分页)

    <div id="one"></div>//显示数据库中数据的<ul id="ones"></ul>//显示分页 ...

  9. AWS Cloud Practioner 官方课程笔记 - Part 1

    课程笔记: 1. 3种访问AWS服务的方式: GUI, CLI, SDK 前两种是用户用来访问的,SDK可以让程序调用去访问服务. 2. core services 以及通用的use cases Am ...

  10. Trapping Rain Water I && II

    Given n non-negative integers representing an elevation map where the width of each bar is 1, comput ...