vuex

state -> data数据 store数据的源地址

mutations -> methods(定义事件) 只支持同步代码

- 不推荐直接触发 mutations 因为可能 devtool 检测不到错误的发生
- fn(state, 参数)

actions -> methods(定义事件) 可以支持异步代码

- fn(aaa, 参数) || fn({ state, commit, dispatch, getters }, 参数)
- state 就是 数据
- commit 可以通过 commit 触发 mutations
- dispatch 可以通过 dispatch 触发别的 actions
- getters 可以通过 getters 直接获取到 getters 的结果

getters -> computd(计算属性)

- 可以按照计算属性理解
- 多对一的关系，由多个值发生改变然后导致一个值发生改变

modules -> 用于合并多个 vuex

- modules 中合并时不需要生成多个 store 实例，只生成一个就可以

触发事件流程

• 1. 用户发生点击或其他操作 -> dispatch 触发 action
• 1. 在 vuex 中 通过 commit 触发 mutations
• 1. 在 vuex 中 通过 mutations 触发 state 的更新
• 1. vuex 中的 state 发生改变，最终导致视图更新

在组件中触发 store 的方法

• mutaions -> commit 触发
• actions -> dispatch 触发
• state & getters 直接获取

v-model 直接使用 state 数据时

• 在这里，假设message为store中的数据，绑定值是可以拿取到store中的信息，但是修改的时候就会发生错误，因为store中的数据需要通过特殊的mutation，即commit进行提交。

<input v-model="message">

• 1. .第一种思路，就是通过监听它的input或者change事件，在事件中进行commit提交，改变store中的值

<input :value="message" @input="updateMessage">
// ...
computed: {
  ...mapState({
    message: state => state.obj.message
  })
},
methods: {
  updateMessage (e) {
    this.$store.commit('updateMessage', e.target.value)
  }
}
下面是mutation函数:
// ...
mutations: {
  updateMessage (state, message) {
    state.obj.message = message
  }
}

• 第二种思路就是使用计算属性的setter

<input v-model="message">
// ...
computed: {
  message: {
    get () {
      return this.$store.state.obj.message
    },
    set (value) {
      this.$store.commit('updateMessage', value)
    }
  }
}

辅助函数

• import { mapState, mapMutations, MapActions, mapGetters } from ‘vuex’;
• …mapState([]) | 辅助函数名称 | 解构数据 | 相等于页面中的 | 页面中那个地方结构 | 如何触发 | | —- | —- | —- | —- | —- | | mapState | 解构 state | data | computed | | | mapMutations | 解构 mutations | methods | methods | commit | | mapActions | 解构 actions | methods | methods | dispatch | | mapGetters | 解构 getters | computed | computed | |

辅助函数

import { mapState, mapMutations, mapActions, mapGetters } from ‘vuex’;

• mapState 是获取state 参数的
• mapGetters 是获取 getters 参数

computed: {
    ...mapState(['list']), // 结构 vuex 中的 state 参数
    ...mapGetters(['sum']), // 解构 vuex 中的 getters 
}

• mapMutations 是触发 mutations 的
• mapActions 是触发 actions 的

methods: {
    ...mapMutations(['changeSum']), // 解构 mutations 中的函数（方法）
    ...mapActions(['addSum']), // 解构 actions 中的函数（方法）
}

vuex 里面的 map 函数的唯一命名

1. 错误信息
Error in v-on handler: "RangeError: Maximum call stack size exceeded"
2. 错误信息
Maximum call stack size exceeded
# 如果说使用辅助函数则不能和当前组件内的 methods 定义的函数名称相同

总结

• 1. 解构出来的东西会自动绑定到 this 上
• 1. 解构出来的 state 数据和 getters 数据可以直接使用
• 1. 解构出来的 mutations 和 actions 可以通过 this 直接调用
• 1. 无论你结构的是 state 还是 actions 都不允许在 data 中或者 methods 中定义相同的名字
• 1. 无论是 actions 和是 mutaions 的函数后面只能接受一个值， 所以你想穿多个值的时候，请传递一个对象

• 封装轮播图组件
  • 1. 版本不匹配 swiper <= 6.0 - vue-awesome-swiper 4.1.1
  • 1. swiper 更新到 6.0 之后的 css 不再是原来的那种 css 样式， 6.0 之后被修改为 swiper/swiper-bundle.css

• 轮播图 6.0.0

  • 1. 在 main.js 中引入

       import VueAwesomeSwiper from 'vue-awesome-swiper';
       import 'swiper/swiper-bundle.css';
       Vue.use(VueAwesomeSwiper);

  • 1. 去组件内搭建结构 详情参照 components/SwiperVue.vue

       <div v-swiper:mySwiper="swiperOption" class="banner">
       <div class="swiper-wrapper">
       <div class="swiper-slide" :key="banner" v-for="banner in banners">
          <img :src="banner">
       </div>
       </div>
       <div class="swiper-pagination"></div>
       </div>

  • 1. 修改配置

       swiperOption: {
       // 　　observer:true,//修改swiper自己或子元素时，自动初始化swiper 
       // 　　observeParents:true,//修改swiper的父元素时，自动初始化swiper 
       　　  loop: true,
       　　  autoplay: {
       delay: 2000,
       　　　　　stopOnLastSlide: false,
       　　　　　// 触摸滑动后是否继续轮播
       　　　　　disableOnInteraction: false
       }

使用 6.0.0 注意事项

• 1. vue-awesome-swiper 这个依赖不需要关注
• 1. 如果非要使用 6.0.0 那么引入的css 文件要修改 swiper/swiper-bundle.css
• 1. swiper 不建议下载 6.0.0 推荐使用 6.0.0 之前的版本
• 1. 如果下载之前的指定版本，需要手动下载 cnpm i -D swiper@5.4.5 | cnpm i -D swiper@5.3.8
• 轮播图 < 6.0.0 -> 5.4.5 | 5.3.8
• 1. 只需要手动指定下载版本即可

cnpm i -D swiper@5.4.5

[

](https://www.iconfont.cn/plus)