vuex的用法介绍

Vuex是一个专门为Vue.js设计的状态管理库，它可以帮助我们更好地管理Vue.js应用程序中的状态。Vuex的主要概念包括：state（状态）、mutations（变化）和actions（行动）。下面是Vuex的用法：

1. 安装Vuex

使用npm或yarn安装Vuex：

npm install vuex --save

2. 创建store

在Vue.js应用程序中，使用Vuex的第一步是创建一个store。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++
    }
  },
  actions: {
    incrementAsync ({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  }
})
export default store

3. 使用store

在Vue.js应用程序中，使用store的方法有两种：

(1) 在组件中使用this.$store访问store中的状态和方法。

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

(2) 在Vue.js实例中使用store。

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

以上就是Vuex的用法介绍。它可以帮助我们更好地管理Vue.js应用程序中的状态，使代码更加清晰和易于维护。