Vuex入门教程，图文+实例解析

什么是Vuex

Vuex是一个为大型单页面应用程序提供的状态管理模式，它将整个应用程序的数据状态分离出来，集中在一个数据存储库中，使应用程序的状态变得可预测。Vuex提供了一个集中式的存储空间，其中包含所有组件都可以访问的状态。

Vuex的核心概念

Vuex中的核心概念包括状态(state)、操作(mutations)、动作(actions)、计算属性(getters)。

状态(state)

state指的是管理的状态数据，是唯一的数据源。

操作(mutations)

mutations负责更新这些状态，它们必须是同步的操作。

动作(actions)

actions用于提交mutations，它可以包含异步操作，可以对mutations进行封装和组合。

计算属性(getters)

getters可以从store的state中派生出一些状态，这些派生状态可以基于应用程序的状态进行缓存，并且只有在其中一个依赖项发生更改时才会重新计算。

Vuex的安装

在使用Vuex之前，需要先安装Vuex库。

使用npm安装

npm install vuex --save

使用yarn安装

yarn add vuex

Vuex实例解析

在使用Vuex之前需要先创建一个store，可以使用Vuex的createStore()方法。

import { createStore } from 'vuex';

const store = createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    decrement(state) {
      state.count--;
    }
  },
  actions: {
    asyncIncrement({commit}) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2;
    }
  }
});

export default store;

上面的代码中，我们创建了一个store实例，并定义了四个核心概念：state、mutations、actions、getters。

其中state是我们需要管理的状态，mutations用于更新状态，actions用于异步操作，getters用于派生状态。

示例一：计数器

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

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

export default {
  computed: {
    ...mapState(['count']),
    ...mapGetters(['doubleCount'])
  },
  methods: {
    ...mapMutations(['increment', 'decrement']),
    ...mapActions(['asyncIncrement'])
  }
};
</script>

上面的代码中，我们通过mapState映射了count状态，使用mapMutations映射了increment和decrement操作，使用mapActions映射了asyncIncrement操作，使用mapGetters映射了doubleCount计算属性。

示例二：TodoList

<template>
  <div>
    <h2>Todo List:</h2>
    <ul>
      <li v-for="(todo,index) in todos" :key="index">{{ todo }}</li>
    </ul>
    <input type="text" placeholder="Add todo" v-model="newTodo" />
    <button @click="addTodo">Add</button>
  </div>
</template>

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

export default {
  data() {
    return {
      newTodo: ''
    };
  },
  computed: {
    ...mapState(['todos'])
  },
  methods: {
    ...mapMutations(['addTodo'])
  }
};
</script>

上面的代码中，我们通过mapState映射了todos状态，使用mapMutations映射了addTodo操作。这个示例中，我们展示了如何使用Vuex来管理TodoList。

至此，我们完成了Vuex的入门教程，希望这个教程对您有所帮助。