Vuexs使用

什么是Vuex？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化

VueX的核心内容

• state 存放状态

  通过this.$store.state访问state中的数据

• mutations state成员操作

  就是把处理数据逻辑方法全部放在mutations里面，使得数据和视图分离。 通过this.$store.commit('mutationA',data)提交模块中的mutation

• getters 加工state成员给外界

  简单来说，vuex 中的getters 相当于vue中的computed ，getters是vuex 中的计算属性 通过this.$store.getters来访问getters的属性

• actions 异步操作

  • action 提交的是 mutation，而不是直接变更状态。
  • action 可以包含任意异步操作。

  通过this.$store.dispatch('actionA,data')提交模块中的action

• modules 模块化状态管理

  • modules的使用推荐这个网站，很详细 点击去看看

Vuex的是使用

1. 初始化store下index.js中的内容

   

2. 将store挂载到当前项目的Vue实例当中（在main.js中引入）

3. 在页面中进行使用

在组件中多次使用同一个mutation

import { mapMutations } from 'vuex'
methods:{
    ...mapMutations({
        setNumber:'SET_NUMBER',
    })
}

在组件中多次提交同一个action

methods:{
    ...mapActions({
        setNumber:'SET_NUMBER',
    })
}

Vuex中action和mutation有什么区别

• action 提交的是 mutation，而不是直接变更状态。mutation可以直接变更状态。
• action 可以包含任意异步操作。mutation只能是同步操作。