[vue]VUEX 一个让你从此摆脱传统繁琐的传值方式 不需要传值！

一、什么是VUEX 。
uex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。


二、什么是“状态管理模式”？
让我们从一个简单的 Vue 计数应用开始：
new Vue({ // state data () { return { count: 0 } }, // view template: `
    <div>pw_ count </div>
  `, // actions methods: { increment () { this.count++ } } })
这个状态自管理应用包含以下几个部分：

• state，驱动应用的数据源；
• view，以声明方式将state映射到视图；
• actions，响应在view上的用户输入导致的状态变化。

以下是一个表示“单向数据流”理念的极简示意：
但是，当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：

• 多个视图依赖于同一状态。
• 来自不同视图的行为需要变更同一状态。

三、  实践与应用


好了。不再废话  直接上代码和方法


第一步、  下载安装VUEX   ：cnpm install vuex --save-dev  (注：不知道cnpm的话 可以看看淘宝镜像   地址：http://npm.taobao.org/)
第二部、   在根文件引入vuex    import vuex from 'vuex'  并将 vuex  实例化 Vue.use(vuex)


第三步、  在项目内创建一个store 状态管理库文件夹   ，并挂载到根文件。上截图
//创建状态管理藏库文件

描述：v

图片：clipboard.png

// 将 vuex 和仓库挂载到vue实例中

图片：clipboard1.png

第四步、 在store文件内创建 index.js 状态库入口文件  和一个模块 仓库modules文件夹  （*  新手可以不需要做模块化拆分， 我这里是为了项目需要）
// store/index.js入口文件

图片：clipboard3.png

第五步、 最后一步  在modules 文件夹下创建不同模块下的状态管理库js  ,这里就那我的profile.js实例代码。
const state = {
//  这里是当前模块的状态
user_name: 'zhaoyuxiang',
status: '1',
modal1: false
}


const actions = {
someAsyncTask({
commit
}) {
// do something async
commit('INCREMENT_MAIN_COUNTER')
}
}
const mutations = {
// 更改当前状态值的方法
changeStatus(state) {
state.status = '0'
console.log(state.status)
}
}
export default {
state,
actions,
mutations
}


到这里 整个状态管理已经创建完毕  那么现在我们怎么在组件内使用这些状态的变量呢？


vuex 提供了一个内置的方法：mapState

在组件内 import vuex 的这个方法: import { mapState } from 'vuex'
使用方法： computed: mapState({
modal1: state => state.pro.modal1
}),a
//截图

图片：clipboard4.png

访问 状态管理仓库内的方法：
this.$store.state.pro.modal1
//实例





访问状态管理仓库的mutations方法： this.$store.commit('changeStatus')


最后导语：
什么情况下我应该使用 Vuex？
虽然 Vuex 可以帮助我们管理共享状态，但也附带了更多的概念和框架。这需要对短期和长期效益进行权衡。
如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 global event bus 就足够您所需了。但是，如果您需要构建是一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。引用 Redux 的作者 Dan Abramov 的话说就是：
Flux 架构就像眼镜：您自会知道什么时候需要它。