vuex管理数据简单案例

好的，我可以回答这个问题。Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以可预测的方式发生变化。以下是一个简单的 Vuex 管理数据的案例：

1. 安装 Vuex：

npm install vuex --save

2. 创建 store.js 文件并引入 Vuex：

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

Vue.use(Vuex)

// 创建 store 实例
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  getters: {
    getCount(state) {
      return state.count
    }
  }
})

export default store

3. 在 main.js 文件中引入 store.js 并注册：

import Vue from 'vue'
import App from './App.vue'
import store from './store'

new Vue({
  render: h => h(App),
  store,
}).$mount('#app')

4. 在组件中使用 Vuex 管理的状态：

<template>
  <div>
    <div>{{ count }}</div>
    <button @click="increment">increment</button>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapGetters({
      count: 'getCount'
    })
  },
  methods: {
    ...mapMutations({
      increment: 'increment'
    })
  }
}
</script>

以上就是一个简单的 Vuex 管理数据的案例。通过 mutations 来修改 state 中的数据，并通过 getters 来获取 state 中的数据。