vue store怎么使用

Vue.js是一个非常流行的JavaScript框架，用于构建单页面应用程序（SPA）和用户界面。Vuex是Vue.js的官方状态管理库，它为Vue应用程序提供了一个集中式的状态管理方案。

使用Vuex，我们可以把应用程序的状态（例如用户信息、购物车数据、主题设置）存储在一个集中的地方，并且可以方便地从任何组件中访问和更新这些状态。

下面是一个简单的例子，展示如何在Vue.js应用程序中使用Vuex：

1. 安装Vuex

npm install vuex --save

2. 创建store实例

在你的Vue.js应用程序中，你需要创建一个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++
    }
  }
})

export default store

在这个例子中，我们创建了一个名为`store`的Vuex实例，并且定义了一个状态`count`和一个mutation`increment`。mutation是一个同步函数，用于更新状态。

3. 在Vue组件中使用store

现在我们已经创建了一个Vuex实例，我们可以在Vue组件中使用它。

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

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

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

在这个例子中，我们使用`mapState`和`mapMutations`辅助函数来从Vuex store中映射状态和mutation到Vue组件。

`mapState`函数将store的状态映射到Vue组件的计算属性中，使我们可以轻松地访问store中的状态。

`mapMutations`函数将store的mutation映射到Vue组件的方法中，使我们可以调用mutation来更新store中的状态。

现在，每次点击“Increment”按钮，`increment`mutation将被调用，并且`count`状态将增加。

这只是Vuex的基础知识。有关更多详细信息，请查阅官方文档。