作者：陶务华

Vuex的使用

老惯例学习一个东西还是wwwh(what、when、how、why)
1.什么是Vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能,这是官方解释，我的理解是他就是一个插件(使用的时候需要Vue.use(vuex)),方便vue管理数据。说到这里可能有些同学会提出疑问模板的data可以管理数据啊,这里阐述下data 管理的是模板里面的数据,vuex管理的是组件通讯的数据。 ;
2、什么时候使用呢
组件之间是独立的，组件之间想要实现通信，我们可以考虑props选项，但这仅限于父组件和子组件之间的通信。如果兄弟组件之间想要实现通信呢？嗯..，方法应该有。抛开怎么实现的问题，试想一下，当做中大型项目时，面对一大堆组件之间的通信，还有一大堆的逻辑代码，会不会很抓狂？？那为何不把组件之间共享的数据给“拎”出来，在一定的规则下管理这些数据呢？ 这就是Vuex的基本思想了。
3.怎么使用
demo地址:https://github.com/taowuhua/vue-
首先看下创建文件的目录结构
Vuex的使用以及小知识分享 - 图1
创建这样的目录结构的初衷是
index.js:方便模块管理，
state.js:声明数据(这里还可以拆分为功能模块，比如登录模块为login.js注册模块为register.js等等，这里还需要继续研究…)
getters.js:取数据
mutations.js:同步修改数据
actions.js:异步修改数据

index.js

  1. import Vue from 'vue'
  2. import Vuex from 'vuex'
  3. import state from './state'
  4. import getters from './getters'
  5. import mutations from './mutations'
  6. import actions from './actions'
  7. Vue.use(Vuex)
  8. const store = new Vuex.Store({
  9.   state,
  10.   getters,
  11.   mutations,
  12.   actions
  13. })
  15. export default store

new Vuex.Store({}) 表示创建一个Vuex实例 Store是Vuex的一个核心方法，字面上理解为“仓库”的意思。Vuex Store是响应式的，当Vue组件从store中读取状态（state选项）时，若store中的状态发生更新时，他会及时的响应给其他的组件（类似双向数据绑定） 而且不能直接改变store的状态，改变状态的唯一方法就是，显式地提交更改（mutations选项）

  1. export default{
  2.   title: '首页',
  3.   token: window.localStorage.getItem('access-token')
  4. }

getters.js

  1. const getters = {
  2.   getTitle: (state) => {
  3.     return state.title
  4.   }
  5. }
  6. export default getters

mutations.js

  1. const mutations = {
  2.   modifyTitle: (state, payload) => {
  3.     state.title = payload
  4.     return state.title
  5.   }
  6. }
  7. export default mutations

actions.js

  1. const actions = {
  2.   modifytitle: (context, payload) => {
  3.     context.commit('modifyTitle', payload)
  4.   }
  5. }
  6. export default actions

actions选项里添加函数（异步）并提交到对应的函数（在mutation选项里）中 context.commit(‘changeAsync’,value),然后通过组件的dispatch进行触发commit的事件

组件的调用

  1. computed: {
  2.     title () {
  3.       return this.$store.state.title
  4.     },
  5.     getTitle () {
  6.       return this.$store.getters.getTitle
  7.     }
  8.   },
  9.    methods: {
  10.     syncModify () {
  11.       return this.$store.dispatch('modifytitle', 'zhazha')
  12.     },
  13.     modify () {
  14.       return this.$store.commit('modifyTitle', '同步渣渣')
  15.     },
  16.   }

有些同学可能已经发现computed里面的代码有冗余，这个问题好办官方给建议了咱们接下来看看这个神奇的函数mapState 辅助函数,传递的参数和值相同的时候可以进行省略
简化如下

  1.  computed: mapState({
  2.   title: 'title',
  3.   getTitle () {
  4.     return this.$store.getters.getTitle
  5.   }
  6. }),

至此Vuex创建完毕，如需全局使用可以将index.js import到main.js里面,然后挂载到vue的实例上面
或者哪一个组件使用直接import就好了。

其他知识点的分享

1.es6的export 和export default
export和export default傻傻分不清,之前没怎么重视这两个关键字(因为不用)，突然有一天发现自己太菜了，就连封装函数都不会，然后就去研究怎么封装函数，发现export和export default居然可以从模块中导出函数、对象或原始值，以便其他程序可以通过 import 语句使用它们。眼角漏出了一丝微笑，这个太简单了…于是就开始撸代码，殊不知后面存在很多的小坑坑
export和export default的区别
使用export 的时候，需要{}，并且在import的时候用户需要知道所要加载的变量名或函数名，否则无法加载。但是，用户肯定希望快速上手，未必愿意阅读文档,这就是弊端
使用export default，默认输出是一个函数。其他模块加载该模块时，import命令可以为该匿名函数指定任意名字
2、什么是堆什么是栈
吃了就拉是堆，吃了就吐是栈，哈哈 虽然很恶心 ，但是真的能管饱…本篇文章很浅显主要是最近在使用上面的总结，后续在考虑源码的深入，如果说用使用上的建议或者补充欢迎沟通。