马小看前端（vuex的用法）

马小看前端（vuex的用法）

vuex的基本：

相信对于vuex都不陌生，因为在我们前端去开发的时候也是会经常用到这个东西，那么vuex是什么呢，它其实说白了就是一个专门为了vue.js开发的状态管理模式

vuex的最基本的五大核心：
state
mutations
Actions
Getters
Modules
其中state和mutations我想应该完全不会陌生因为其实这俩个是我们在vuex中经常会接触到的俩大核心，为什么会说这个是核心呢？

state是唯一的数据源，我们通常会把值放到state里面实现存取的一些操作，然而实现这一些操作那么就一定会有事件触发，这时候就用到了mutations也就是来操作state中数据的，一般的情况下，项目不是很复杂的情况下，我们通常利用这俩个就应该可以实现业务需求了

1、什么是State，我也提到过，我们每一个组件里面的data里面的变量我们都称之为State,State也是我们整个Vue整个核心的概念，这也就是告诉我们的开发者，Vue是一个渐进式的框架，我们的使用状态去管理和操作我们的DOM，改变我们的UI，不是使用过去的那种直接操作DOM的方式。所以说State是我们VUEX里面的一个核心的概念，他在VUEX里面也是一个核心的概念。

State是唯一的数据源，也就是它是唯一的载体，我们需要把任何一个需要抽取出来的变量，都要放到我们的State里面去来进行管理，那么我们在任何一个页面都可以取到它。

单一的状态树，什么是单一的状态树，也是说我们通过定义一个store的实例，那么这个store实例里面只有一个State，单一的状态树，它不像我们的Vue组件里面还可以嵌套另一个组件，另一个组件里面还可以嵌套N的组件，这样它是一个很有层级的关系的东西；
但是我们这个VUEX，其实很单一，它就是一棵树，这棵树这个store对象只要注册到我们的main.js里面，只要被我们的vue注册之后，vue里面所有层级关系的组件都可以使用，它是比较单一的一颗状态树。
我们看下列组件，这是一个定时器的组件，他里面包括一个模板，我们可以看到模板里面用到count这么一个属性，我们可以看到它里面有个computed的计算属性，这个computed计算属性也就是说，当我们里面的变量发生变化了以后，它都会时时的进行计算，最后来渲染我们的视图。
我们可以看到它里面定义了count这么一个函数，computed里面必须都是函数，在计算属性里面它每个字段对应的都是函数，我们模板里面的count对应就是computed里面的count方法；当模板里面的count发生变化的时候，computed里面的count就会时时计算，计算完了就渲染到模板对应的位置。

下面来看看vuex的模型图：

state与Mutations这个我们前面已经了解过了，在vuex中还会有一个就是getter计算属性，在一些项目如果是大型的开发时候就会用到他来操作，可以去计算state中的数据，在页面中可以直接使用getter的方法

const store = new Vuex.Store({  
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)    //{ id: 1, text: '...', done: true }
    }
  }
})
 
store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]