vue.js 2.0系列之Vuex

一，为什么要使用Vuex

当项目变得越来越复杂的时候，我们修改了组件中的一个数据，但是这个数据又在其他组件中被使用。我们就需要通知其他所有涉及这个数据的组件，这其实时比较麻烦的。

Vuex就是把项目中出现在多个组件的数据抽离出来，统一管理。一旦数据被改变，Vuex会自动通知所有的使用到该数据的组件。

二，如何使用Vuex

1.下载按安装Vuex

npm install vuex  --save

2.在入口文件中引入并使用Vuex

import Vuex from 'vuex'

Vue.use(vuex)

3.配置store

首先要理解vuex的设计原理



当组件中的数据改变时，只能通过“$store.dispatch”调用Actions

Actions中的方法不能直接修改state,只能通过调用Mutations

Mutations修改state

state更新视图

例如：

在组件中数据发生改变时



Actions中的方法可以调用mutations中的方法来改变试图



注意：Actions与mutations的主要区别就是，Actions可以调用一些异步方法，当数据请求回来以后再使用mutations中的方法更该状态

获取$store中的数据

方法一：

this.$store.state.xxxx    //xxxx代表存储的变量名

方法二：使用$store.getters

this.$store.getters.getTotal

可以参考官方推荐的目录结构

4.把配置好的store放置在vue得实例化对象中