vue2 store使用

Vue2的状态管理库Vuex可以帮助我们管理Vue应用中的各种状态数据，使得状态的变化更加可控和可预测。下面是一个简单的使用步骤：

1. 安装Vuex

可以使用npm或yarn安装Vuex：

npm install vuex --save

yarn add vuex

2. 创建store实例

在项目中创建一个store.js文件，定义Vuex的实例：

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

Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        increment(state) {
            state.count++
        },
        decrement(state) {
            state.count--
        }
    },
    actions: {
        increment(context) {
            context.commit('increment')
        },
        decrement(context) {
            context.commit('decrement')
        }
    }
})

export default store

上面的代码中，我们定义了一个状态state，一个mutation用于修改状态，一个action用于异步操作。这些都是Vuex的核心概念。

3. 在Vue组件中使用store

我们可以在Vue组件中使用Vuex的状态和方法：

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

<script>
import { mapState, mapActions } from 'vuex'

export default {
  computed: mapState(['count']),
  methods: mapActions(['increment', 'decrement'])
}
</script>

上面的代码中，我们使用了Vuex提供的mapState和mapActions函数，将状态和方法映射到组件的computed和methods属性中。

这样就可以使用Vuex来管理Vue应用中的状态了。