vuex-0-基础概念

1.前言

what vuex

1.Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
2.它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测 的方式发生变化
3.Vuex 也集成到 Vue 的官方调试工具

---

2. what “状态管理模式

简单 经典的计数器案例 为引子

---

3. 分析下 上面案例的状态管理

state，驱动应用的数据源；
view，以声明方式将 state 映射到视图；
actions，响应在 view 上的用户输入导致的状态变化。

“单向数据流”理念的简单示意

state.png

---

多个组件共享状态时,单向数据流的简洁性很容易被破坏:原因如下

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

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

Vuex 是专门为 Vue.js 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新

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 模板 重点

   传给兄弟组件 -- {{num}}

组件 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

1. 并不是所有的项目都适合 用vuex,适合自己的才是最好的
2. 还有哪些可以变向管理状态或者说 页面共享数据
3. dataset
4. cookie
5. storage
6. 极端情况 window 挂载属性

---

参考资料

vuex
vue Devtools 极简插件,搜索 安装方便

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉