Vue 中如何模块化使用 Vuex

最新推荐文章于 2024-08-22 11:06:05 发布

我爱学习yq

最新推荐文章于 2024-08-22 11:06:05 发布

阅读量723

点赞数 17

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_74801194/article/details/135831251

版权

本文介绍了如何在Vue应用中使用Vuex进行状态管理，包括创建store、定义状态、mutations、actions和getters，以及如何在组件中通过mapState、mapGetters和mapActions进行状态与动作的映射。

摘要由CSDN通过智能技术生成

在 Vue 中使用 Vuex 进行模块化管理状态非常简单，以下是一个基本的代码示例：

在 main.js 中引入 Vuex：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

// 创建 store
const store = new Vuex.Store({
  // 定义状态
  state: {
    count: 0
  },
  // 定义 mutations
  mutations: {
    increment(state) {
      state.count++
    }
  },
  // 定义 actions
  actions: {
    increment(context) {
      context.commit('increment')
    }
  },
  // 定义 getters
  getters: {
    doubleCount(state) {
      return state.count * 2
    }
  }
})

// 将 store 注入到 Vue 实例中
new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

然后在组件中使用 Vuex：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from 'vuex'

export default {
  computed: {
    // 将 Vuex 的 state 映射为组件的计算属性
    ...mapState(['count']),
    // 将 Vuex 的 getters 映射为组件的计算属性
    ...mapGetters(['doubleCount'])
  },
  methods: {
    // 将 Vuex 的 actions 映射为组件的方法
    ...mapActions(['increment'])
  }
}
</script>

这样就可以在组件中通过 count 获取状态值，通过 doubleCount 获取计算属性值，并通过 increment 方法触发 mutation 来修改状态。