vue组件通讯vuex状态管理例子

Vuex 是 Vue.js 的状态管理模式和库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。以下是一个简单的 Vuex 状态管理例子，展示如何在 Vue 组件中使用 Vuex 进行通讯。

首先，我们需要安装并引入 Vuex。如果你正在使用 Vue CLI 创建的项目，可以通过 npm 或 yarn 来安装：

bash

npm install vuex

# 或者

yarn add vuex

然后，我们可以在 Vue 应用中设置 Vuex：

store.js

javascript

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({

  state: {

    count: 0

  },

  mutations: {

    increment(state) {

      state.count++

    },

    decrement(state) {

      state.count--

    }

  },

  actions: {

    incrementAction({ commit }) {

      commit('increment')

    },

    decrementAction({ commit }) {

      commit('decrement')

    }

  },

  modules: {

    // 可以在这里添加其他模块

  }

})

接下来，在 Vue 应用的主入口文件（通常是 main.js 或 main.ts）中引入并使用 Vuex store：

main.js

javascript

import Vue from 'vue'

import App from './App.vue'

import store from './store'

new Vue({

  store,

  render: h => h(App),

}).$mount('#app')

现在，我们可以在 Vue 组件中使用 Vuex：

Counter.vue

vue

<template>

  <div>

    <p>Count: {{ count }}</p>

    <button @click="increment">Increment</button>

    <button @click="decrement">Decrement</button>

  </div>

</template>

<script>

export default {

  computed: {

    count() {

      return this.$store.state.count

    }

  },

  methods: {

    increment() {

      this.$store.commit('increment')

      // 或者使用 action

      // this.$store.dispatch('incrementAction')

    },

    decrement() {

      this.$store.commit('decrement')

      // 或者使用 action

      // this.$store.dispatch('decrementAction')

    }

  }

}

</script>

在上面的 Counter.vue 组件中，我们使用了计算属性 count 来从 Vuex store 中获取 count 的值。我们还定义了两个方法 increment 和 decrement，它们分别通过调用 Vuex store 中的 commit 方法来触发 mutations 中的 increment 和 decrement 函数。

你也可以选择使用 actions 而不是直接调用 mutations，因为 actions 允许你包含任意异步操作。在上面的例子中，我已经注释了使用 actions 的代码，你可以取消注释来查看如何使用它们。

这样，我们就实现了一个简单的 Vuex 状态管理例子，在 Vue 组件之间共享了状态 count。