## Vuex
Vuex是一个专为Vue.js应用程序开发的**状态管理模式**。
调试工具：vue devtools
> Vuex就像眼镜：您自会知道什么时候需要它。
### 1，状态
在商店中定义数据，在组件中直接使用：
目录：`store / index.js`
```js
导出默认的新Vuex.Store（{
//状态等于组件中的数据，专门存放到堆积的数据
状态：{
数：0
}，
吸气剂：{}，
变异：{}，
动作：{}，
模块：{}
}）
```
目录：`Home.vue`
html
<模板>
<div class =“ home”>
<h2>主页页面的数字：{{$ store.state.num}} </ h2>
</ div>
</ template>
<脚本>
export default {
}
</script>
```
或者写为：
```html
<template>
<div class="about">
<h2>About页面的数字：{{num}}</h2>
</div>
</template>
<script>
export default {
computed: {
num(){
return this.$store.state.num
}
}
}
</script>
```
### 2、getters
将组件中统一使用的computed都放到getters里面来操作
目录：`store/index.js`
```js
export default new Vuex.Store({
// state相当于组件中的data，专门用来存放全局的数据
state: {
num: 0
},
// getters相当于组件中的computed，getters是全局的，computed是组件内部使用的
getters: {
getNum(state) {
return state.num
}
},
mutations: {},
actions: {},
modules: {}
})
```
目录：`Home.vue`
```html
<template>
<div class="home">
<h2>Home页面的数字：{{$store.getters.getNum}}</h2>
</div>
</template>
<script>
export default {
}
</script>
```
### 3、mutations
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
目录：`store/index.js`
```js
export default new Vuex.Store({
// state相当于组件中的data，专门用来存放全局的数据
state: {
num: 0
},
// getters相当于组件中的computed，getters是全局的，computed是组件内部使用的
getters: {
getNum(state) {
return state.num
}
},
// mutations相当于组件中的methods，但是它不能使用异步方法（定时器、axios）
mutations: {
// 让num累加
// payload是一个形参，如果组件在commit时，有传这个参数过来，就存在，如果没有传过来，就是undefined
increase(state, payload){
state.num += payload ? payload : 1;
}
},
actions: {},
modules: {}
})
```
目录：`Btn.vue`
```html
<template>
<div>
<button @click="$store.commit('increase', 2)">点击加1</button>
</div>
</template>
<script>
export default {
methods: {
/* addFn(){
// 调用store中的mutations里的increase方法
// 传参的话，使用payload
this.$store.commit('increase', 2)
} */
}
}
</script>
```
### 4、actions
actions是store中专门用来处理异步的，实际修改状态值的，还是mutations
目录：`store/index.js`
```js
// 在store(仓库)下的index.js这份文件，就是用来做状态管理
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
// state相当于组件中的data，专门用来存放全局的数据
state: {
num: 0
},
// getters相当于组件中的computed，getters是全局的，computed是组件内部使用的
getters: {
getNum(state) {
return state.num
}
},
// mutations相当于组件中的methods，但是它不能使用异步方法（定时器、axios）
mutations: {
// 让num累加
// payload是一个形参，如果组件在commit时，有传这个参数过来，就存在，如果没有传过来，就是undefined
increase(state, payload){
state.num += payload ? payload : 1;
},
// 让num累减
decrease(state){
state.num--;
}
},
// actions专门用来处理异步，实际修改状态值的，依然是mutations
actions: {
// 点击了“减1”按钮后，放慢一秒再执行减法
decreaseAsync(context){
context.commit('decrease')
}
},
modules: {}
})
```
目录：`Btn.vue`
```html
<template>
<div>
<button @click="$store.commit('increase', 2)">点击加1</button>
<button @click="$store.dispatch('decreaseAsync')">点击延迟减1</button>
</div>
</template>
<script>
export default {
methods: {
/* addFn(){
// 调用store中的mutations里的increase方法
// 传参的话，使用payload
this.$store.commit('increase', 2)
}
reduceFn(){
this.$store.dispatch('decreaseAsync')
} */
}
}
</script>
```
### 5、辅助函数
mapState和mapGetters在组件中都是写在computed里面
```html
<template>
<div>
<h2>Home页面的数字：{{num}}</h2>
<h2>About页面的数字：{{getNum}}</h2>
</div>
</template>
<script>
import { mapState, mapGetters } from 'vuex'
export default {
computed: {
...mapState(['num'])
...mapGetters(['getNum'])
}
}
</script>
```
mapMutations和mapActions在组件中都是写在methods里面
```html
<template>
<div>
<button @click="increase(2)">点击加1</button>
<button @click="decreaseAsync()">点击延迟减1</button>
</div>
</template>
<script>
import { mapMutations, mapActions } from 'vuex'
export default {
methods: {
...mapMutations(['increase']),
...mapActions(['decreaseAsync'])
}
}
</script>
```
### 6、拆分写法
store中的所有属性，都可以拆分成单独的js文件来书写
### 7、modules
我们的store可以认为是一个主模块，它下边可以分解为很多子模块，子模块都可以单独领出来写，写完再导入到主模块中。下面以 `users` 子模块举例：
将mutations中所有的方法，归纳起来。
目录：`mutations_type.js`
```js
export const MUTATIONS_TYPE = {
INCREASE: 'increase',
DECREASE: 'decrease'
}
export default {
// 让num累加
// payload是一个形参，如果组件在commit时，有传这个参数过来，就存在，如果没有传过来，就是undefined
[MUTATIONS_TYPE.INCREASE](state, payload){
state.num += payload ? payload : 1;
},
//让num累减
[MUTATIONS_TYPE.DECREASE]（州）{
state.num--;
}
}
```
目录：`store / index.js`
```js
从'./mutaions_type'导入突变
导出默认的新Vuex.Store（{
...
突变
...
}）
```
组件中：
html
<模板>
<div class =“ about”>
<h2>关于页面的数字：{{getNum}} </ h2>
<button @ click =“ increase（）”>关于的按钮，点击加1 </ button>
</ div>
</ template>
<脚本>
从“ vuex”导入{mapGetters，mapMutations}
从'@ / store / mutaions_type.js'导入{MUTATIONS_TYPE}
导出默认值{
计算值：{
... mapGetters（['getNum']）
}，
方法： {
//方法一：
... mapMutations（[[MUTATIONS_TYPE.INCREASE]）
//方法二：
/* 增加（）{
this。$ store.commit（MUTATIONS_TYPE.INCREASE）
} * /
}
}
</ script>
```
网友评论