- 什么是Vuex
根据官方的说法是Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
官方链接：vuex.vuejs.org/
从中我们可以关注到，这应该是一个关于状态管理的工具，简单的理解就是我们的数据状态该怎么变化，如何控制，可以通过Vuex来控制。
比如我们的登录状态、还有一些组件需要用到的data，如果通过仅通过组件间互相传值，一旦项目变大，非常的不好管理。引入Vuex，我们就只需要把这些值定义在Vuex中，即可在整个Vue项目的组件中使用。
- Vuex使用方式
在Vuex里我们主要要学会使用store，即这是一个仓库，它包含着我们应用的大部分状态，Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
- vuex安装 npm i vuex -s
库的安装同npm方式依赖进来，这时候我们可以在src目录下新建一个store文件夹，并创建index.js文件，写上以下代码，初始化store
代码语言：javascript复制import Vue from 'vue'
import Vuex from 'vuex'
//挂载
VuexVue.use(Vuex)
//创建VueX 对象
const store = new Vuex.Store(
{ state:{
//存放的键值对就是所要管理的状态
name:'Hello VueX',
permission:[],
}
})
export default store
复制代码- store使用
在main.js文件里引入store
代码语言：javascript复制import store from './store'
new Vue({ router, store, render: h => h(App),}).$mount('#app')
复制代码并将其挂载到vue对象里，之后我们就可以在组件里使用到这个数据了。
- 在组件里使用store {{this.$store.state.name}}
如上在任何某个组件里可以取到对应的值
可以看到在组件里显示出了在state里定义的name值。
一个简单的使用方式就是这样可以完成了。
- Vuex成员列表
- state：存放数据状态,即定义各种数据。
- mutations：state的成员操作。
mutations是操作state数据的方法的集合，比如对该数据的修改、增加、删除。
并且更改 Vuex 的 store 中的状态的唯一方法是提交 mutation,这是重点，同时
**mutation 必须是同步函数，**要记住
代码语言：javascript复制mutations: {
changeNewName (state) {
// 变更状态
state.name="Hello Friend"
}}
复制代码同样的在store里定义mutations，并增加一个方法，这个方法修改了state的值。在组件里调用的方式如下
代码语言：javascript复制this.$store.commit('changeNewName')
复制代码这会直接出发changeNewName方法，改变name的值,界面的状态就会响应氏的改变。同时store.commit 还可以传入额外的参数,参数类型自己定义
changeNewName (state,name) {
// 变更状态
state.name="Hello Friend " name
}
复制代码我们把方法改成增加一个参数，那么我们在commit的时候 就多传一个参数
代码语言：javascript复制this.$store.commit('changeNewName','love')
复制代码- getters：加工state成员给外界。 const store = new Vuex.Store({ state:{ //存放的键值对就是所要管理的状态 name:'Hello VueX', permission:[], }, getters: { changeName: state => { return state.name.substring(0,5) } }})
在Vuex对象里定义getters，我们可以定义一个方法，返回的是取state 里name字段的前5个字符，然后在组件里调用。
代码语言：javascript复制mounted() {
console.log('取store的值',this.$store.getters.changeName)
}
复制代码在组件的mounted方法里可以像上面这样直接调用，然后拿到结果
可以看到调用了changeName方法，并返回了对应的结果。
- actions：可以做异步操作数据。
- Action 提交的是 mutation，而不是直接变更状态。
- Action 可以包含任意异步操作。
actions的调用方式是通过 this.$store.dispatch("changeNewName",'love actions')
代码语言：javascript复制actions:{
changeNewName ({ commit },payload)
{ // 变更状态
commit('changeNewName',payload)
}}
复制代码这样便是触发了mutations 中 changeNewName方法,更改了我们state。
同时store.dispatch 可以处理被触发的 action 的处理函数返回的 Promise，并且 store.dispatch 仍旧返回 Promise。
- modules ：模块化状态管理
这里可以帮助我们 把store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter，官方所示，基本其他使用方式都一样
代码语言：javascript复制const moduleA = {
state: () => ({ ... }),
mutations: { ... },
actions: { ... },
getters: { ... }
}
const moduleB = {
state: () => ({ ... }),
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态
复制代码这一块后续在补充一篇来详解。
- 总结
综上所写，Vuex这个工具极大的方便了我们的开发，可以统一管理一些状态，一般建议在中大型项目上使用，毕竟也是消耗不少的资源，小项目能不用还是可以不用的。
以上只是介绍了一些简单的使用方式，还有一些辅助函数、组合方式的使用，在后续在补充完整。
