什么是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是单向数据流