Vuex的使用

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