如何在Vue项目中使用vuex

当我们的Vue应用逻辑越来越复杂，存在多个组件之间需要共享相同的状态时，我们就需要一个状态管理工具来进行数据的管理，这个时候Vuex就可以派上用场了。

以下是在Vue项目中使用Vuex的攻略:

什么是Vuex?

Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态。

为什么我们要使用Vuex?

当我们的应用程序变得庞大且困难时，我们需要一个集中管理数据的工具，以减少数据的重复和创作。这个时候Vuex就派上用场了。

以下是vuex的入门流程：

安装Vuex

在Vue项目中使用Vuex,我们需要先安装Vuex。我们可以使用npm进行安装。安装命令如下：

npm install vuex

Vuex的基本概念

Vuex中有以下几个基本概念：

基本概念- State

State是Vuex Store中用于存储状态的对象，用于存储数据。在组件中我们可以使用getter来访问State属性。

我们可以如下进行配置：

const store = new Vuex.Store({
  state: {
    count: 0
  }
})

基本概念- Getter

Getter就是用于在Store中获取State中状态的函数，通过计算和处理State中的属性可以返回一个新的Computed属性。

我们可以如下进行配置：

const store = new Vuex.Store({
  state: {
    todos: [
      {id: 1, text: '...', done: true},
      {id: 2, text: '...', done: false}
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

基本概念- Mutation

Mutation用于在State中更新状态的函数，但它是唯一可以更新State值的方法。Mutation函数是同步方式被调用，通过Mutation更新过的State值可以被DevTools捕捉到。

我们可以如下进行配置：

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment(state) {
      // 变更状态
      state.count++
    }
  }
})

基本概念- Action

有时候我们需要在Mutation之前执行一些异步操作，可以使用Action来处理异步请求。与Mutation不同，Action是可能是异步的，且它必须以Object形式进行定义。

我们可以如下进行配置：

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment(state) {
      // 变更状态
      state.count++
    }
  },
  actions: {
    incrementAsync ({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  }
})

Vuex在Vue项目中的使用及示例

假设我们有这样一个需求：点击“+”号按钮可以让数值加1，点击“-”号按钮可以让数值减1。以下是使用Vuex实现该功能的示例：

示例1

我们的Vuex Store中只有一个State属性count，用于记录我们要在页面上更新的数值。

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0
  }
});

export default store;

组件中可以如下使用Vuex：

<template>
  <div>
    <button @click="inc">+</button>
    <div>{{ count }}</div>
    <button @click="dec">-</button>
  </div>
</template>

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

export default {
  computed: mapState(['count']),
  methods: mapMutations(['increment', 'decrement']),
  methods: {
    inc() {
      this.increment();
    },
    dec() {
      this.decrement();
    }
  }
};
</script>

在方法中使用Vue-Router的mapState或mapMutations，我们可以轻易地将我们定义的State属性和Mutation函数映射到组件中。

示例2

我们需要为存储在Store中的数据定义Getter，在这个示例中，我们需要定义doneTodos的Getter用于获取State中的done属性为true的todos。

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    todos: [
      {id: 1, text: '...', done: true},
      {id: 2, text: '...', done: false},
      {id: 3, text: '...', done: true}
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
});

export default store;

在组件中我们可以如下使用doneTodo处理后的State属性中的todos：

import { mapGetters } from 'vuex';

export default {
  computed: mapGetters(['doneTodos']),
};

以上就是使用Vuex在Vue项目中进行状态管理的基本流程和示例。