先行者计划--1107微课 《什么是Vuex？》| 文字简版

vuex是什么东西？

官网对Vuex的定义，"Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。"

恩，从这句话可以看出，它应该是一种编写js的思路，并不是一种新的技术。做什么什么的模式嘛，就是“这个事儿该怎么做”的意思呗。

接下来，"它采用集中式存储，管理vue应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。"

这个就是说，集中式存储，就是把vue应用的所有的状态放在一个统一的地方。所有要使用状态的角色都来这里获取状态，兄弟组件传递信息不用再找爸爸了。那么放哪了呢？你可以暂且认为这是一个全局变量的套路。

我们说，一切工具都是为了需求服务的。

现在看来，这个vuex就是为管理"状态"而服务的。

你把门打开，门的状态从关转换为开；

你把开关从横转到竖，开关的状态从横向转换为纵向；

你从左到右拖动网页上的按钮，它的位置坐标x发生了变化。

这些变化的就是状态，就是此物现在是什么样。开的？关的？横的？竖的？

状态的改变，是因为我们的行为改变了它的外观。

反过来说，也是事物的表现层对我们的action做出了反馈。

即，改变了事物的状态，就是改变了事物的外观(表现层，view)。

回到网页上来讲，组件的状态就是”这个组件现在什么样“。 把所有的组件”现在是什么样？“都统一的保存的一个地方，就是”集中式存储管理应用的所有组件的状态“。

引申开去的讲，前端所有会引起变化的，例如click,drap,load,ajax,show,hide等等，都会引起变化，同时，它们也都是“状态”，而vuex要管理的，也就是它们所引起的变化。

以上这些关于vue状态的描述，都是我个人主观的理解。

关于"状态"的描述，未必完全正确，但我认为大方向应该没有错。

<!-- 虽不中，亦不远矣。 -->

刚才说了，可以暂且把vuex的状态管理当成一个全局变量来看待。

但现在我们要说一下它和全局变量的区别：

1，vuex中存储的state是响应式的。

每当store中的state变化，那么components的view也相应的会得到update；

2，改变store中的state的唯一方法，就是commit mutations，提交变化。

<!-- -->

Vuex使用store对象来保存和管理整个应用的状态，

在store里包含以下对象，

-- state – 存放状态

-- getters – state的计算属性 （是不是感觉很像redux中的reducers？）

-- mutations – 更改状态的逻辑，同步操作

（是不是感觉有点像redux中的subscribe？）

-- actions – 提交mutation，异步操作

（会不会感觉有点像 redux当中 的dispatch({type.xxx})？ ）

-- mudules – 将store模块化

因为vue应用是模块化的开发，所以组件的状态在state中的保存方式，

必然也是按对应的模块的结构来保存的。

<!-- -->

官方的说法：

state，驱动应用的数据源；（所有状态保存在这）

view，以声明方式将state映射到视图；（改变状态引发表现层变化）

actions，响应在view上的用户输入导致的状态变化。（事件改变状态）

<!-- -->

现在可以确定，Vuex的核心就是store[stɔ:(r)]对象。

因为是统一管理状态的，所以每个vue应用只能有一个store对象。

在它里面包含着此应用中的状态，state。

注意：

数据流都是单向的

组件能够调用 action

action 用来派发 Mutation

只有 mutation 可以改变 state

store 是响应式的，无论 state 什么时候更新，组件都将同步更新

这是一个最简章的vuex的结构：（它不能运行，因为它只是结构）

这里的参数是一个对象，它就是redux中的reducers，也就是计算的过程。 只不过在这个dmeo中，它带有逻辑和事件、状态

const store = new Vuex.Store({
 state: {
        // 存放状态
    },
     getters: {
        // state的计算属性
        // 用来从 store 获取 Vue 组件数据
    },
    mutations: {
        // 更改state中状态的逻辑，同步操作
    },
    actions: {
        // 提交mutation，异步操作
        // 可以给组件使用的函数
    },
    modules: {
        a: moduleA,
        b: moduleB,
        // ...
    }
});

<!-- 截图很清晰，代码也很简单 -->