vue2 vuex 存和取

在Vue2中，使用Vuex进行数据的存储和获取非常方便。下面是一个简单的示例来演示如何在Vue2中使用Vuex进行数据的存储和获取[^1]：

1. 首先，安装Vuex和vuex-persist插件：

npm install vuex --save
npm install vuex-persist --save

2. 在Vue项目的入口文件（通常是main.js）中引入Vuex和vuex-persist插件，并创建一个Vuex的store实例：

import Vue from 'vue'
import Vuex from 'vuex'
import VuexPersist from 'vuex-persist'

Vue.use(Vuex)

const vuexPersist = new VuexPersist({
  key: 'my-app',
  storage: window.localStorage
})

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    increment(context) {
      context.commit('increment')
    }
  },
  plugins: [vuexPersist.plugin]
})

new Vue({
  store,
  // ...
}).$mount('#app')

3. 在组件中使用store中的数据和方法：

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

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count
    }
  },
  methods: {
    increment() {
      this.$store.dispatch('increment')
    }
  }
}
</script>

通过上述步骤，你可以在Vue组件中使用`$store.state`来获取存储在Vuex中的数据，使用`$store.commit`来修改数据，使用`$store.dispatch`来触发异步操作。