状态管理集Vuex的使用及理解 store

我个人比较倾向于先将流程再讲理解，这样有些童鞋不想往下看的时候，也能知道具体怎么使用了。

使用流程如下：

1、安装 npm install vuex --save
2、src目录下新建一个store目录，新建一个index.js文件，代码如下：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Stroe({
	state:{
		name:'dayingying'
	},
	mutations:{
		changeName(state,newName){
			state.name = newName
		}
	}
})

3、在入口文件main.js中引入store
为了在 Vue 组件中访问 this.$store 你需要为 Vue 实例提供创建好的 store。Vuex 提供了一个从根组件向所有子组件，以 store 选项的方式“注入”该 store 的机制：

import store from 'stroe/index.js'
new Vue({
	el:'#app',
	router,
	store
})

这样就引入成功了，可以直接在自己的代码中使用了，获取state中的值用this.$store.state.name
修改值得时候使用this.$store.commit('changeName',newName)
注意：必须使用提交mutation的方式修改state中的值，而不能直接进行修改。
上面的是stroe基础的使用，真正做项目的时候，都是稍微中大型的网站才用的到状态管理集，所以还需要对代码进行优化
1）把store中index.js中的代码拆分为state.js mutations.js getter.js 等，然后在index.js中引入。



使用的时候，我们可以用映射map
首先引入映射import {mapState,mapMutations} from ‘vuex’

mapState

把vuex中state中的属性name，映射到名字叫做name的计算属性中，可以直接将name作为计算属性使用

mapMutations

直接将方法映射到methods中
以下是个人总结的Vuex的几个核心的部分
1） States 存放公用的数据
2） Actions 一些异步的方法可以放置再此处
3） Mutations 同步的对数据的改变
4） Getter 作用类似于计算属性computed，当我们需要根据state里面的数据算出一些新的数据的时候，我们需要借助gatters计算，可以避免数据的冗余。


5） Module 当我们遇到一个非常复杂的业务场景，比如说我们再管理后台系统的时候，经常会有很多公用的数据再vuex中存储，如果把所有业务逻辑都放在Mutations中，这个文件会变得非常庞大，难以维护，这个时候可以借助module可以对复杂的state,mutations,actions等进行拆分。

每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。