Vuex 的理解及使用场景

什么是vuex

• Vuex 是一个专为 Vue应用程序开发的状态管理模式,每一个Vuex 应用核心就是 store(仓库)

特点

1.Vuex 存储的数据是响应式的

• 若 store 状态发生改变,相应的组件也会得到相应的更新

• 改变store中状态的唯一途径就是显式提交 (commit) mutation 这样可以方方便的跟踪 每一个状态的变化

Vuex 五大核心

• 1.State : 定义应用状态的数据
• 2.Mutations : 存放 操作修改State中数据的方法 必须是同步函数
• 3.geeter：从基本数据(state)派生的数据，相当于state的计算属性
• 4.action：和mutation的功能大致相同，不同之处在于
  • Action提交的是mutation，而不是直接变更状态。
  • Action可以包含任意异步操作。
• 5. modules : 模块化veux 让每一个模块拥有自己的 state mutation action getters 方便管理

Vuex中action和mutation有什么区别？

• action 提交的是 mutation，而不是直接变更状态。mutation可以直接变更状态。

• action 可以包含任意异步操作。mutation只能是同步操作。

• 提交方式不同，action 是用this.$store.dispatch('ACTION_NAME',data)来提交。mutation是用this.$store.commit('SET_NUMBER',10)来提交。

• 接收参数不同，mutation第一个参数是state，而action第一个参数是context，其包含了

如何在组件中批量使用vuex的state状态 ?

使用 mapState辅助函数 利用对象展开运算符将state混入computed对象中

import {mapState} from 'vuex'
export default{
    computed:{
        ...mapState(['price','number'])
    }
}