vuex

什么是vuex

状态管理模式

集中式存储管理

存储的东西有哪些：全局共享的属性、全局共享的方法...

vuex的使用场景（为什么要用？）

很多组件共同使用某一个值的时候（组件传值有可能很繁琐所以直接用全局共享的属性比较方便）

数据统一管理好维护

vuex中的属性

state 有点像组件的data就是来存放共享数据的

1.this.$store.state.xxx

2.使用辅助函数

				<script type="text/javascript">
				import { mapState } from 'vuex'
				export default{
				  computed:{
				    ...mapState(['str1'])
				  }
				}
				</script>

调用：{{ str1 }} 或 this.str1

区别

this.$store.state.xx --> 其实是在$store本身里面找到的属性值
辅助函数的形式--> mapState会把state的某一值拷贝一份给vue当前组件的对象

this.$store.state.xx 可以直接修改源数据,this.xxx 不可以直接修改

getters 有点像组件的computed放计算state属性的(和state类似)

1.this.$store.getters.changeStr1

2.辅助函数的形式

			<script>
			import { mapGetters } from 'vuex'
			export default {
			  computed:{
			    ...mapGetters(['changeStr1'])
			  }
			}
			</script>

因为Vuex是单线数据流，所以v-model绑定getters会报错，而且没有get和set的写法（组件是有的，vuex是没有的）

mutations 有点像组件的methods放全局共享方法

1.辅助函数的形式

			<template>
			  <div class="home">
			    首页 {{ num }}
			    <button @click='add(10)'>按钮</button>
			  </div>
			</template>
			<script>
			import { mapState , mapMutations } from 'vuex'
			export default {
			  computed:{
			    ...mapState(['num']),
			  },
			  methods:{
			    ...mapMutations(['add'])
			  }
			}
			</script>

2.通过commit方式提交mutations

this.$store.commit('add',20)
***这种形式是store来提交mutations的形式

actions 它和mutations优点类似，actions也是存放方法

1.

			actions: {
			    total( {commit,state} ){
			      state.num++;
			    }
			}

2.this.$store.dispatch('total',20);

actions和mutations的总结对比

1.提交方式

mutations可以通过commit来提交
actions可以通过dispatch来提交

2.Action 提交的是 mutation，而不是直接变更状态

actions可以直接修改state属性值？是可以的，但是不建议这样写

3.同步异步

mutations是同步函数 (类似于单线程)
actions 是可以包含异步

modules 把整个状态管理再次细分

只有数据有区别,方法还是原来的写法

		computed:{
			...mapState({
				组件自定义属性名:state=>state.模块.具体属性名
			})
		}

面试题类

当某一个组件使用了vuex的数据，比如把1修改成了2，刷新页面又到了1该怎么办？【Vuex的持久化存储】

**注意：Vuex是一个集中式的状态管理工具，本身不是持久化存储，如果要实现持久化存储可以：
		1. 自己写localStorage
		2. 使用插件
			https://www.xuexiluxian.cn/blog/detail/beebe5210b54417cb061f9e8b515bbba

在某个组件中可以直接修改Vuex的状态（数据）吗？

可以的：

	1. 通过mutations方法来修改
	2. 组件直接修改vuex数据源

		this.$store.state.shop.num = 200;

不可以的：
	1. 直接使用辅助函数	

		this.num ==》 这种情况是不可以修改的

Vuex中的getters属性在组件中被v-model绑定会发生什么？

如果修改了，会报错，因为Vuex是单向数据流。

Vuex是单向数据流还是双向数据流？

Vuex是单向数据流