vuex使用步骤（vue应用程序状态管理之超详细vuex使用分析实战案例）
vuex使用步骤（vue应用程序状态管理之超详细vuex使用分析实战案例）老麦克耸耸肩说：“没问题，我需要喝杯咖啡补充能量，但我的咖啡喝完了” 。小白：你的讲解让我对vuex有了更清晰的认识，但我更希望您能通过一个案例来进行讲解。“那么我开始我的讲解”我并不想照本宣科的来讲，但请允许我列出最主要的核心对象并结合自己的方法做一番介绍：本质上Vuex只做了一件事，就是Vue应用程序的状态管理。 他有五个默认的基本的对象：
小白：“是的，我认真的读了一遍”
“good，那么你运行过官方的代码示例吗？” 老麦克继续问。
“额~，这个好像还没有。” 小白摇头
“好吧，你应该把官方提供的案例在你的电脑上运行一下，感受下vuex的作用” 麦克黑建议道。
“那么我开始我的讲解”
我并不想照本宣科的来讲，但请允许我列出最主要的核心对象并结合自己的方法做一番介绍：
本质上Vuex只做了一件事，就是Vue应用程序的状态管理。 他有五个默认的基本的对象：
- state: [规定；声明；陈述]。 他的作用就是声明遍历，存储状态数据，你不觉的他类似于Vue里的data吗？
- getters: [获得者；得到者]。 状态（state)的计算属性，对标Vue里的的computed 计算属性。
- mutations[突变；变化；转变]：这个单词让我想到了范海辛里的狼人和生化危机里的病变僵尸。他对标与Vue里的mothods方法，注意他的同步的。
- actions：[ 行动 动作] 需要注意的是他的异步的，很多数据获取的工作，比如调用api接口都在这里完成。
- modules：store的子模块，在开发大型项目的时候你一定会用的上。
小白：你的讲解让我对vuex有了更清晰的认识，但我更希望您能通过一个案例来进行讲解。
老麦克耸耸肩说：“没问题，我需要喝杯咖啡补充能量，但我的咖啡喝完了” 。
“没问题，我来搞定”
须臾，一杯香气四溢的咖啡放在了麦克黑的面前。
“非常棒的咖啡”
“那么我们继续~”
我首先从一个最简单的小例子开始讲起。
首先你需要创建一个Vue项目，并安装 Vuex
Vue create yourAppName npm install vuex —save
然后在你的项目里新建一个文件夹，我们通常管这个文件夹叫 store或者vuex 然后在文件夹里创建index.js
然后我们在store/index.js文件中写入如下内容：
并在main.js中进行引入。
然后就可以在你的项目里到处引用了。比如我们在components 文件夹下建立一个test.vue用来测试一下。记得把test.vue引入到你的app.vue中。
components/test.vue 里输入代码如下：
那么你将看到如下页面：
你也看到了 我们使用 $store.state.count 将 state对象上的属性都暴漏给页面了。
接下来我们就可以使用同步和异步的方式来操作vuex种state 接下来，从某种意义上来说，vuex 主要就是用来对state（数据状态）操作并暴漏出去的。
getters对象getters对标Vue里的的computed 计算属性。我来举个例子，
然后我们在store/index.js文件中写入如下内容：
然后在test.vue组建中进行使用：
然后再预览下看看：
接下来我们继续完善store/index.js中的代码：
然后在我们的test.vue 组中进行调用：
tips：你看我们在暴漏 vuex 中mutations方面的时候使用的是 this.$store.commit 方法。
actions对象上面代码很简单相信你都理解，接下来我们来继续看下 actons的使用，继续更新store/index.js中的代码:
不知道你主要到没，大多数情况下，actions中的函数都会触发 mutations中的方法。
然后我们再看下在页面组件中如何使用actions方面中的函数
tips: 你看我们在暴漏 vuex 中actions方面的时候使用的是 this.$store.dispatch方法。
小白：每次调用都要用这种链式写法太麻烦了，一大串的英文单词太丑了，我记得官方文档中提到了更快捷的方式，可以说下吗？
“不错，有进步，不想偷懒的程序员不是好的程序员，我们来看下他们的简化调用方式”
你发现了吗，简便的调用方式是将 vuex里的方法映射到了vue里面来。
modules 对象关于modules 他其实就是在我们的项目过于庞大的情况下才会用到，庞大到我们觉的一个store/index.js 不足以支撑我们的状态控制管理。举个栗子：
我们可以分两个文件来编写：
然后这样来使用他们：
小白：”非常感谢，我清楚了vuex 的使用，但我还有一个疑问，vuex中的state，或者 getters 只能在Vue中的computed 中调用吗？我是否可以在Vue data 中直接调用?”
“当然可以！不过 data 是在页面初始化的时候只调用一次，如果在data 中直接使用他，那么就表示，这些数据或者状态你是不希望他们发生变化的。明白吗？”
小白：“最后一个问题，上面的例子太多简单了能不能举一个您在实际工作中的例子呢？”
“好吧，就用我在使用nuxt.js开发过程中的代码讲解一个小案例吧”
你看我在nuxt.js服务器端使用异步方通过 $axios.get初始化了数据的状态然后通过调用mustations方法设置了 state 状态。
小白：“太棒了，我已经了解了vuex的使用了，这对我的工作帮助很大”。
小白：“我想问 vuex中的vuexContent context是指什么？”
“哈，真是个很有上进心的boy，这个问题不错，不过我想等到午餐后才继续我们的谈话，听过附近餐厅的榴莲味的披萨不错”。
小白：“，我请客~”
麦克黑：“很荣幸和你一起共进午餐”。
“对了，你的咖啡从哪里买的？”
“买？我从总经理办公室拿的~”
“噗~”
