vue中store怎么用于通讯的例子

在 Vue.js 中，我们通常使用 Vuex 作为状态管理库来管理全局状态，并通过 store 来实现组件之间的通讯。Vuex 的 store 包含了你的应用程序中大部分的状态 (state)。

下面是一个简单的 Vuex store 用于组件通讯的例子：

安装 Vuex

如果你还没有安装 Vuex，可以通过 npm 或 yarn 来安装：

npm install vuex

# 或者

yarn add vuex

 

设置 Vuex Store

在 Vue 项目的 src 目录下创建一个 store.js 文件，并定义你的 Vuex store：

javascript

// src/store.js

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: {

    increment({ commit }) {

      commit('increment');

    },

    decrement({ commit }) {

      commit('decrement');

    },

  },

});

在 Vue 应用中使用 Store

在你的主 Vue 实例（通常在 main.js 或 main.ts 文件中）中，引入并使用这个 store：

javascript

// src/main.js

import Vue from 'vue';

import App from './App.vue';

import store from './store';

new Vue({

  store,

  render: h => h(App),

}).$mount('#app');

在组件中使用 Store

现在你可以在任何组件中通过 this.$store 来访问 store，但通常我们会使用 mapState、mapMutations、mapActions 等辅助函数来简化代码。

例如，在一个组件中增加和减少 count：

vue

<template>

  <div>

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

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

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

  </div>

</template>

<script>

import { mapState, mapMutations } from 'vuex';

export default {

  computed: {

    ...mapState(['count']),

  },

  methods: {

    ...mapMutations(['increment', 'decrement']),

  },

};

</script>

 

在这个例子中，count 是一个从 store 中的 state 映射到组件计算属性的变量。而 increment 和 decrement 是从 store 中的 mutations 映射到组件方法的函数。这样，当点击按钮时，就会调用对应的 mutations 来更新 store 中的状态，从而实现组件之间的通讯。