vuex 状态管理模式

本文主要是介绍vuex 状态管理模式，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

Vuex： 单一状态树

Vuex 的定义：

import Vue from 'vue'
import Vuex from 'vuex'const store = new Vuex.Store({state: {                   // 数据count: 0},mutations: {               // 修改Store 内数据状态的方法，必须是同步事务increment (state,n) {  // n: 入参state.count++}},actions: {                 // 类 mutations，可以包含异步事务incrementAsync ({ commit,state },n) { // commit 类 StoresetTimeout(() => {commit('increment')})}}
})

Vuex 在组件内的使用：

// vuex 的修改
mutations:单个：this.$store.commit('increment',n)多个：...mapMutations(['increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`'incrementBy' // 将 `this.incrementBy(amount)` 映射为`this.$store.commit('incrementBy', amount)`])actions:单个：this.$store.dispatch('increment',n)多个：...mapActions(['increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`'incrementBy' // 将 `this.incrementBy(amount)` 映射为`this.$store.dispatch('incrementBy', amount)`])// vuex 的获取 
单个：computed: {count () {return this.$store.state.count}}
多个：mapState 辅助函数computed: {// 使用对象展开运算符将此对象混入到外部对象中...mapState(['count',...])} 

 

这篇关于vuex 状态管理模式的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---