vue2使用vuex存储数据

Vue2中，Vuex是一个专为构建大型单页面应用（SPA）状态管理模式而设计的状态容器。它允许你在整个应用中共享状态，并通过action（异步操作）和mutation（同步更新）来管理状态的变化。

以下是使用Vuex存储数据的基本步骤：

1. **初始化Vuex**: 首先要在项目中安装Vuex并创建store实例。在main.js文件中导入Vue和Vuex，然后创建一个新的store实例：

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0 // 存放初始状态的数据
  },
  mutations: {
    increment(state) { // 更新状态的函数
      state.count++
    }
  },
  actions: {
    increment(context) { // 异步操作
      return new Promise(resolve => setTimeout(() => resolve(), 1000)) // 模拟延迟
        .then(() => context.commit('increment'))
    }
  },
  getters: {
    getCount(state) { // 访问状态的辅助函数
      return state.count
    }
  }
})

2. **在组件中使用Vuex**: 在需要读取或修改state的组件中，通过`this.$store.state`访问state，通过`this.$store.dispatch(actionName)`触发action。例如：

<template>
  <div>{{ count }}</div>
</template>

<script>
export default {
  computed: {
    count() { // 使用getter获取状态
      return this.$store.getters.getCount()
    }
  },
  methods: {
    handleIncrement() { // 调用action
      this.$store.dispatch('increment')
    }
  }
}
</script>