什么是vuex:

vuex 是应用程序开发的状态管理状态,他采用了集中式储存管理的应用的所有的组件状态;

Vuex的使用场景:

  • 多个视图使用一个状态:

传参的方法对于多层嵌套的组件将会很麻烦,当你使用的vuex这个状态会在你项目的任何地方都可以使用这个状态;

  • 不同试图需要变同一状态:

采用父子组件直接或者通过事件来变更和同步状态的多份拷贝,通常会导致无法维护代码;

Vuex简化流程:

View components -> actions(dispatch方式) -> mutations(commit方式) -> state -> View components
而 getters则可以理解为computed,作为state的计算属性

使用Vuex的注意事项:

1. 数据流都是单向的

2. 组件能够调用action

3. action用来派发mutation

4. 只有mutation可以改变状态

5. store是响应式的,无论state什么时候更新,组件都将同步更新

Vuex的五大核心:

1、 state

  • Vuex 使用单一状态树,用一个对象就包含了全部的应用层次状态。至此它便作为一个唯一的数据源而存在。
    这也意味着,每个应用将仅仅包含一个store实例。
    单状态树让我们能够直接地定位任一特定的状态片段,在调试的过程中也能轻易地取得整个当前应用状态的快照。

2、 Getter

  • 用来从store获取Vue组件数据,类似于computed

3、 Mutation

  • 事件处理器用来驱动状态的变化,类似于methods,同步操作

4、 Action

  • 可以给组件使用的函数,以此用来驱动事件处理器 mutations,异步操作

5、 Module

  • 由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。

Vuex的四个辅助函数:

  • 语法糖,四大金刚辅助函数:mapState,mapActions,mapMutations,mapGetters

四个辅助函数在组件中使用:

import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
export default {
  computed: {
    ...mapGetters({
      "": "vuex仓库定义的方法",
    }),
    ...mapState({}),
  },
  methods: {
    ...mapMutations({}),
    ...mapActions({}),
  },
};
</script>
Logo

前往低代码交流专区

更多推荐