Vue状态管理（Vuex）

# Vue状态管理（Vuex）
> w什么是状态管理?

理论上来说，每一个 Vue 组件实例都已经在“管理”它自己的响应式状态了。

## Vuex库
Vuex是一个专为Vue.js应用程序开发的状态管理模式+库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

简单理解，状态管理就是为了更方便的管理组件之间的数据交互，提供一个集中式的管理方案，任何组件都可以按照指定的方式进行读取和改变数据。

![](/media/202209/2022-09-15_114156&1zjGiBw9KpQUTcLRokmf.png)
> 上图，紫色组件需要传给其他组件，左边就很复杂，右边直接传给STORE（集中式管理方案vuex）了，然后由他来分发

之前props和自定义事件可以实现组件之间的数据交互，但是他们是基于父子组件关系了。如果一个组件网络里，要相互传递数据，这时候就需要用到vuex来进行管理了。

## 引入vuex的步骤
### 1. 安装vuex
vuex也是官方的第三方组件，直接`npm i --save vuex`进行安装。
也可以像路由一样在创建的时候，手动选择上vuex。

### 2. 配置vuex文件
创建一个store目录存放一个index.js文件：
```js
import { createStore } from "vuex"

// Vuex的核心作用就是帮我们管理组件之间的状态的
export default createStore({
	//所有的状态（数据）都放在这里
	state:{
		counter: 0
	}
})
```

### 3. 在主文件中引入Vuex
```js
import store from "./store" 
app.use(store)
```

### 4. 在组件中读取状态
```
<p>counter:{{ $store.state.counter }}</p>
//或者
import { mapState } from 'vuex';
computed:{
	...mapState(["counter"])
}
```
示例：
```
<template>
	<h3>新闻详情</h3>
	<p>{{ $route.params.name }}</p>
</template>

## Vuex状态管理的核心
最常用的核心概念包含：State/Getter/Mutation/Action

## Getter
对Vuex中的数据进行过滤
```js
import { createStore } from 'vuex'

export default createStore({
  state: {
	  counter: 0
  },
  getters: {
	  getCounter(state){
		  return state.counter > 0 ? state.counter : "counter数据异常"
	  },
	  getCounter2(state){
		  return state.counter+1 > 0 ? state.counter+1 : "counter数据异常"
	  }
  }
})
```
Vue界面中2中调用方法：
```html
<template>
  <div class="home">
	<h3>home</h3>
	<p> 第一种：count = {{ $store.getters.getCounter }}</p>
	<p>第二种：count = {{ getCounter2 }}</p>
  </div>
</template>

export default {
  name: 'HomeView',
  components:{  
  },
  computed:{
	  ...mapGetters(["getCounter2"])
  }
}
</script>
```

### Mutation
更改Vuex的store中的状态的唯一方法是提交mutation，Vuex中的mutation非常类似于某个事件：每个mutation都有一个字符串的事件类型（type）和一个回调函数（handle）。这个回调函数就是我们实际进行状态更改的地方，并且他会接受state作为第一个参数。
```js
mutations: {
	addCounter(state){
		state.counter++
	},
	addCounter2(state, num){ //接收其他参数
		state.counter += num
	}
},
```
vue界面中调用：
```html
<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
	<h3>home</h3>
	<p> count = {{ $store.getters.getCounter }}</p>
	<p>{{ getCounter2 }}</p>
	<button @click="addClickHandle">增加</button>
	<button @click="addClickHandle2">增加20个</button>
  </div>
</template>

export default {
  name: 'HomeView',
  components:{  
  },
  computed:{
	  ...mapGetters(["getCounter2"])
  },
  methods:{
	  addClickHandle(){
		  //回调函数的固定调用写法（第一中调用方式）
		  this.$store.commit("addCounter")
	  },
	  ...mapMuations(["addCounter2"]), //第二种调用方式是用mapMutations
	  addClickHandle2(){
		  this.addCounter2(20)
		  //this.$store.commit("addCounter2", 20)
	  }
  }
}
</script>
```
任何组件引用了同一个值，都会得到相应的更改。

### Action
Action类似于mutation，不同在于：
- Action提交的是mutation，而不是直接变更状态
- Action可以包含任意异步操作

所以，有异步操作的时候，才需要用Action。
```js
// 为异步操作所准备的
  actions: {
	  asyncAddCounter({ commit }){ // { commit }是对象的结构赋值
		  axios.get("http://iwenwiki.com/api/generator/list.php")
		  .then(res => { //网络请求到的数据提交给mutation
			  //下面这个为使用方式！！！
			  commit("addCounter2", res.data[0]); //此处将获取到的数据res.data[0]传递给了mutations中的addCounter2方法，外部直接调用此方法即可。
		  })
	  }
  },
```
vue界面中2种调用方法：
```html
<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
	<h3>home</h3>
	<p> count = {{ $store.getters.getCounter }}</p>
	<p>{{ getCounter2 }}</p>
	<button @click="addClickHandle">增加</button>
	<button @click="addClickHandle2">增加30个</button>
	<br/><br/>
	<button @click="addAsyncClickHandle">异步增加</button>
	<button @click="addAsyncClickHandle2">异步增加调用方法2</button>
  </div>
</template>

export default {
  name: 'HomeView',
  components:{  
  },
  computed:{
	  ...mapGetters(["getCounter2"])
  },
  methods:{
	  addClickHandle(){
		  //回调函数的固定调用写法（第一中调用方式）
		  this.$store.commit("addCounter")
	  },
	  ...mapMutations(["addCounter2"]), //第二种调用方式是用mapMutations
	  addClickHandle2(){
		  this.addCounter2(30)
		  //this.$store.commit("addCounter2", 20)
	  },
	  addAsyncClickHandle(){
		  this.$store.dispatch("asyncAddCounter");
	  },
	  ...mapActions(["asyncAddCounter"]),
	  addAsyncClickHandle2(){
		  //this.$store.dispatch("asyncAddCounter");
		  this.asyncAddCounter();
	  }
  }
}
</script>
```