vuex怎么用

Vuex是Vue.js的官方状态管理库，用于管理Vue.js应用程序中的状态。它可以让我们更方便地管理应用程序的状态，使得状态的变化变得可追踪和可控。

下面是Vuex的基本用法：

1.安装Vuex

npm install vuex --save

2.创建store

在Vue.js应用程序中，我们需要创建一个store来管理应用程序的状态。我们可以在一个单独的文件中创建store，例如：store.js。

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: {
    incrementAsync ({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  }
})

export default store

在上面的代码中，我们创建了一个store，它有一个状态(count)，两个mutation(increment和decrement)和一个action(incrementAsync)。

3.在Vue.js中使用store

在Vue.js中使用store，我们需要在Vue.js应用程序中注入store。我们可以在main.js中注入store。

import Vue from 'vue'
import App from './App.vue'
import store from './store'

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

现在，我们就可以在组件中使用store了。例如，在一个组件中使用计数器：

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

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

在上面的代码中，我们通过计算属性获取计数器的值，通过commit方法来触发mutation，通过dispatch方法来触发action。

以上就是Vuex的基本用法。