WEB前端16-Vuex状态管理模式




// 引入Vue和Vuex
import Vue from 'vue'
import Vuex from 'vuex'
 
// 使用Vuex插件
Vue.use(Vuex)
 
// 定义状态
const state = {
  count: 0
}
 
// 定义mutations
const mutations = {
  increment(state) {
    state.count++
  },
  decrement(state) {
    state.count--
  }
}
 
// 创建并导出Vuex的store实例
export default new Vuex.Store({
  state,
  mutations
})

这个代码实例展示了如何在Vue.js应用中使用Vuex来管理状态。首先引入Vue和Vuex，然后使用Vue.use来安装Vuex插件。接着定义了一个状态对象和一个包含增加（increment）和减少（decrement）方法的mutations对象。最后创建并导出了一个Vuex的store实例，该实例包含了定义的状态和变更方法。这样就可以在Vue组件中通过调用this.$store.commit('increment')或this.$store.commit('decrement')来变更状态。

WEB前端16-Vuex状态管理模式

评论已关闭

推荐阅读