1.png
如果看懂这张图片那就说明你就会用了
以上是vuex使用流程图 用于多个组件数据传值，公用数据放到公用的存储空间，某一个组件改变了公用数据其他组件可以感知到
公用数据是存放在state里面
改变state中的公用数据流程：
1、如果是异步操作或者复杂的批量同步操作就放到actions(组件使用dispatch调用actions)里面--->调用mutations(actions使用commit调用mutations)，里面放的是一个个同步对state的修改；
2、也可以滤过actions直接调用mutations改变state里面的值，当数据发生变化时组件展示也发生了
在main里面引入，放到Vue根实例下，这样所有的页面都可以直接使用
changCity方法名字可以自定义
ctx为上下文，这样可以拿到commit方法
2.png
在组件里调用改变
3.png
以上通过actions转发调用mutations改变state数据的
以下是直接调用mutations改变state数据
使用localStorage做数据缓存
4.png
使用try catch做优化
5.png
6.png
实际开发中简化写法 把state、actions、mutations分别定义一个js文件 在store文件中引入
7.png
import {mapState,mapMutations} from 'vuex' 的使用
//调用
//可以简化写法
<div class="button">
<!--{{this.$store.state.city}}-->
{{this.currentCity}}
</div>
/*数组写法
computed: {
//mapState是值把vuex里的数据映射到该组件的计算属性里
// 就是把city映射到了computed的city计算属性中
...mapState(['city'])
}
*/
computed: {
//mapState可以是数组也可以是对象
//下列意思是 把vuex里的city映射到组件的计算属性里
//映射过来的名字就是currentCity
...mapState({
currentCity: 'city'
})
},
methods: {
handleBtnClick(value){
//派发一个叫changeValue的方法传递的参数是value
//常规使用 修改state 通过actions再调用mutations
//this.$store.dispatch('changeValue',value)
//直接调用mutations写法
// this.$store.commit('changeCity', value)
//mapMutations的写法
this.changeCity(value)
this.$router.push('/')
},
//mutations中有一个changeCity
//把mutations中的changeCity映射到组件的叫做changeCity的方法里
...mapMutations(['changeCity'])
}
getters用法
getters的作用类似于组件中的computed计算属性的作用，
当我们想根据state里的数据算出新的数据的时候，可以使用getters提供新的数据，避免冗余
8.png
9.png
