vuex的使用步骤

下面是Vuex使用步骤的完整攻略。

安装Vuex

首先需要安装Vuex，可以通过npm安装，执行以下命令：

npm install vuex --save

创建Vuex 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++
    }
  },
  actions: {
    increment(context) {
      context.commit('increment')
    }
  }
})

export default store

在上面的代码中，我们使用Vuex创建了一个store，包括了state、mutations和actions三个部分。state用于存储应用程序状态，mutations用于更改状态，actions则是包含异步操作的方法，通过触发mutations来更改状态。

在Vue组件中使用Vuex

在Vue组件中使用Vuex需要通过Vuex提供的辅助函数来实现。首先在组件中引入Vuex：

import { mapState, mapMutations, mapActions } from 'vuex'

然后定义组件：

export default {
  computed: {
    ...mapState({
      count: state => state.count
    })
  },
  methods: {
    ...mapMutations([
      'increment'
    ]),
    ...mapActions([
      'incrementAsync'
    ])
  }
}

在上面的代码中，通过mapState辅助函数将state映射到组件的计算属性中，然后通过mapMutations和mapActions辅助函数将mutations和actions映射到组件的methods中。之后在组件模板中可以直接使用state、mutations和actions：

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

示例

例如我们可以通过Vuex实现一个简单的计数器功能。首先在store.js中定义状态和操作：

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')
    }
  }
})

接着在组件中使用Vuex：

import { mapState, mapMutations, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState({
      count: state => state.count
    })
  },
  methods: {
    ...mapMutations([
      'increment',
      'decrement'
    ]),
    ...mapActions([
      'increment',
      'decrement'
    ])
  }
}

最后在模板中使用组件：

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

这样就可以通过点击按钮来触发对应的mutations或actions，从而更改状态。