vuex如何使用

Vuex是一个专为Vue.js设计的状态管理模式。它集中式管理了应用中所有组件的状态，使得状态管理更加简单和高效。下面是使用Vuex的基本步骤：

安装Vuex

可以使用npm或yarn安装Vuex：

npm install vuex --save

创建store文件

在src目录下创建一个store文件夹，在这个文件夹下创建一个index.js文件：

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

export default store

在这个文件中，我们首先引入了Vuex和Vue，然后创建了一个Vuex的store实例，并在它的state中定义了一个count变量。mutations中定义了一个increment方法，用来改变state中的count变量。最后，我们将store实例导出。

1. 在Vue组件中使用store

在Vue组件中使用store非常简单，只需要在组件中引入store实例并调用它的方法即可。例如，在一个组件中想要显示state中的count变量，可以这样写：

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

<script>
import store from '@/store'

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

在这个组件中，我们通过computed属性获取了state中的count变量，并在模板中使用它。increment方法中调用了store的commit方法来调用mutations中的increment方法，改变state中的count变量。

这就是使用Vuex的基本步骤。当然，Vuex还有很多高级用法和功能，可以根据具体的需求进行使用。