1.前言
what vuex
1.Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
2.它采用
集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化3.Vuex 也集成到 Vue 的官方调试工具
2. what “状态管理模式
简单 经典的计数器案例 为引子
<template> <div id="one"> <p>{{ count }}</p> <button @click="addCount()">增加</button> </div> </template> <script> export default { data: function () { return { count: 1, }; }, methods: { addCount() { this.count++; } } }; </script>
3. 分析下 上面案例的状态管理
state，驱动应用的数据源；
view，以声明方式将 state 映射到视图；
actions，响应在 view 上的用户输入导致的状态变化。
“单向数据流”理念的简单示意
state.png
多个组件共享状态时,单向数据流的简洁性很容易被破坏:原因如下
多个视图依赖于同一状态。
来自不同视图的行为需要变更同一状态。
把组件的共享状态抽取出来，以一个全局单例模式管理
Vuex 是专门为 Vue.js 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新
![9V(M8ZEW8_JEEHJ4]9QQ@XA.png](https://ucc.alicdn.com/pic/developer-ecology/5e278375192a4feb8728b5ce6f709f1c.png?x-oss-process=image/resize,w_1400/format,webp "9V(M8ZEW8_JEEHJ4]9QQ@XA.png")
vuex.png
4. 安装
vue-cli
可以创建项目的是 配置这个
vuex这样,生成的项目会有基础的配置,比如目录.引用或者是 vue add vuex 这样,生成的项目也会有基础的配置,比如目录.引用
npm 安装
npm install vue --S
需要 简单的配置
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex)
5. 来一个小练习 先体会下
组件 A 模板 重点
<button @click="add()">传给兄弟组件 -- {{num}}</button>
组件 A 传值
重要 的是创建了一个 中间
Vue实例对象 用于周转这个就是 事件中心
event bus
创建一个空的vue实例对象,目的是实现兄弟组件之间的交互 var bus = new Vue({}); add(){ this.num++; // /当组件需要给其他组件传值时,可以调用总线bus的$emit发射一个事件，需要接收这个传值的组件监听这个事件即可。 bus.$emit("changeData",this.num); },
组件B
核心代码 是监听 组件A 的事件
created(){ // 此时this指代自定义的f_view对象，记录该对象 var _this = this; console.log(this); // 接收传值的组件需要监听总线bus上的传值事件 // 通过bus.$on添加总线事件监听，第一个参数是监听的事件类型，第二个参数是事件绑定的函数，事件函数的参数就是发射事件时所传递的参数。 bus.$on("changeData",function(a){ // 此时的this指代vue实例tempVe对象 // a接收事件发射传递过来的num值 --- h_view中的数据源 console.log(a); _this.count = a; }); }
6. vuex
- 并不是所有的项目都适合 用
vuex,适合自己的才是最好的- 还有哪些可以变向管理状态或者说 页面共享数据
- dataset
- cookie
- storage
- 极端情况 window 挂载属性
