Vuex的理解与运用_vuex 的核心是不是就是一个全局变量的意思

初步认识Vuex

Vuex是什么？

• 官方解释
  Vuex是一个专为Vue开发的应用程序的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
• 我的理解
  Vuex采用类似全局对象的形式来管理所有组件的公用数据，如果你想想修改这个全局对象的数据，是可以的，但没那么简单，你得按照Vuex提供的方式来修改，不能自己随意用自己的方式来修改。

Vuex的好处

• 状态存储是响应式：当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
• 不能随意修改Vuex的状态：改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。

Vuex的适用场景

不是所有使用vue开发的SPA（single page application）单页应用都适合采用Vuex。如果你的应用是个小型的应用，组件不多，组件之间的状态依赖不多，关系清晰容易维护，也就是说不同组件之间很少有数据之间的关联的话，那么你大可不用Vuex来开发。反之，如果你开发的是较大型的应用，出现多个视图组件共同依赖一个状态，这个状态相当于我们的全局对象数据，其他组件的改动，会影响到它，反之，它的修改也需要更新其他关联的组件，那么Vuex就很适用。比如：商城系统，外卖系统等等。

理解Vuex的核心概念

Store

要使用Vuex，我们要创建一个实例 store ，我们称之为仓库，利用这个仓库 store 来对我们的状态进行管理。

//创建一个 store
 const store = new Vuex.Store({});
1
2

State

Vuex 使用单一状态树，用一个对象State包含了整个应用层级的所有状态，你可以理解为这些状态就是一堆全局变量和数据。

//创建一个 store
 const store = new Vuex.Store({
    //state存储应用层的状态
    state:{
        count:5  //总数：5
    }
 });
1
2
3
4
5
6
7

上面的例子中，假设我们有一个全局状态count的值为5。那么，我们就可以将其定义为 state 对象中的key和value，作为全局状态供我们使用。

Getter

还记得Vue中的计算属性computed 吗？当我们需要在data的基础上再派生一些状态的时候，就会使用computed 来实现。同样，当我们需要从 state 中派生出一些状态的时候，就会使用到getters，你可以将 getters 理解state的计算属性。

getters 接受 state 作为其第一个参数：

const store = new Vuex.Store({
   //state存储应用层的状态
   state:{
      count:5  //总数：5
    },
    //派生出来的状态
   getters:{
      //ES6 的箭头函数语法
    newC
1
2
3
4
5
6
7
8
9