Vuex教程

官方文档：https://vuex.vuejs.org/zh/api/

Vuex使用场景：全局管理数据

注意：vue2项目要安装vuex3版本，vue3项目要安装vuex4版本

基本使用

安装

npm install vuex@3 --save

建立以下目录结构

/ src
	/ store
		- store.js

创建vuex store

vuex 中最关键的是store对象，这是vuex的核心。可以说，vuex这个插件其实就是一个store对象，每个vue应用有且仅有一个store对象。

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    // 在这里定义你的状态
    count: 0,
    username: 'zhangsan'
  },
  mutations: {
    // 在这里定义你的mutations
    increment(state) {
      state.count++;
    },
    setUsername(state, username) {
      state.username = username;
    }
  },
  actions: {
    // 在这里定义你的actions
    asyncFetchUsername({ commit }) {
      // 模拟异步请求数据
      setTimeout(() => {
        const username = 'John Doe';
        commit('setUsername', username);
      }, 1000);
    }
  },
  getters: {
    // 在这里定义你的getters
    getCount(state) {
      return state.count;
    },
    getUsername(state) {
      return state.username;
    }
  }
});

export default store;

引入store

//main.js
import Vue from 'vue';
import App from './App.vue';
import store from './store';

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

在组件中使用Vuex

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Username: {{ username }}</p>
    <button @click="increment">Increment</button>
    <button @click="fetchUsername">Fetch Username</button>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.getters.getCount;
    },
    username() {
      return this.$store.getters.getUsername;
    }
  },
  methods: {
    increment() {
      this.$store.commit('increment');
    },
    fetchUsername() {
      this.$store.dispatch('asyncFetchUsername');
    }
  }
}
</script>

总结

getters和mutations是Vuex中的两个核心概念，它们在用途和作用上有一些区别。

1. Getters（获取器）
   ○ Getters用于从state中派生出新的数据，类似于计算属性。它们可以对state进行处理和计算，并返回一个新的值。
   ○ Getters可以被视为Vuex Store的计算属性，它们的返回值会被缓存，只有当依赖的state发生改变时才会重新计算。
   ○ Getters通过在Store中定义getters对象来声明。
   ○ 在组件中可以通过this.$store.getters来访问和使用Getter的返回值。
2. Mutations（变更）
   ○ Mutations是用于修改state的方法。它们是唯一可以修改state的方式。
   ○ Mutations必须是同步函数，用于确保状态的变更是可追踪和可预测的。
   ○ Mutations通过在Store中定义mutations对象来声明。
   ○ 在组件中可以通过this.$store.commit来触发Mutation的执行，从而修改state中的数据。
   总结：
   ● Getters用于派生状态，对state进行计算和处理，并返回新的值，类似于计算属性。
   ● Mutations用于修改state，是唯一可以直接修改state的方式，但要确保是同步的。

store构造器选项

mutations

在 Vuex 中，mutations 用于修改state中变量。
以下是mutations 的主要特点和用途：

1、同步操作: Mutations 是同步的，它们立即执行，这意味着状态的变更是立即生效的。这使得状态的变更更加可控和可预测。

2、固定的函数签名: 每个 mutation 都有一个固定的函数签名，接受两个参数：
第一个参数是当前的状态对象（state），即要修改的状态。
第二个参数是 payload，包含要修改的数据。这是一个可选参数，可以是任何类型的数据，通常用来传递修改状态所需的数据。

3、唯一的数据源: Mutations 通常只用来修改状态，不应该包含业务逻辑或异步操作。它们应该是纯函数，接受一个输入并返回一个新的状态副本。

以下是一个示例 Vuex mutation 的代码：

const mutations = {
  // 修改状态的示例 mutation
  incrementCounter(state, amount) {
    state.counter += amount;
  },
  
  // 使用 payload 修改状态的示例 mutation
  setUser(state, user) {
    state.currentUser = user;
  }
};

action

在 Vuex 中，action 用于处理异步操作和业务逻辑，被用来触发 mutations 来修改应用的状态（state）。与 mutations 不同，actions 可以包含异步操作，例如数据获取、网络请求或定时器等，以及复杂的业务逻辑。
Actions 的主要作用包括：

1、触发 Mutations: Actions 可以通过 commit 方法来触发 mutations，从而修改应用的状态。这允许你将所有的状态修改集中在 mutations 中，以便更容易跟踪和调试应用状态的变化。

2、异步操作: 由于 actions 可以包含异步代码，因此它们非常适合处理需要等待时间的操作，例如发起网络请求、读取本地存储或执行定时任务。这使得 Vuex 能够管理复杂的数据流和副作用。

3、组织业务逻辑: Actions 可以包含应用的业务逻辑，例如验证、数据转换、条件判断等。将业务逻辑放在 action 中可以使代码更具可维护性，因为它将逻辑从组件中分离出来，使得组件更专注于用户界面的交互。
一个典型的 Vuex action 的结构如下：

const actions = {
  // 异步操作示例
  fetchData({ commit }) {
    // 这里可以进行异步操作，如发起网络请求
    // 异步操作完成后，使用 commit 触发 mutations
    axios.get('/api/data')
      .then(response => {
        commit('setData', response.data);
      })
      .catch(error => {
        commit('setError', error);
      });
  },
  
  // 同步操作示例
  updateCounter({ commit }, value) {
    // 这里可以执行同步操作
    commit('setCounter', value);
  }
};

在上面的代码示例中，有两个不同类型的 actions。fetchData 是一个异步操作，它发起了一个网络请求并在数据返回后通过 commit 触发 mutations 来更新应用状态。而 updateCounter 是一个同步操作，它直接通过 commit 更新状态，没有异步操作。

在 store 上注册 action。处理函数总是接受 context 作为第一个参数，context 对象包含以下属性：

{
  state,      // 等同于 `store.state`，若在模块中则为局部状态
  rootState,  // 等同于 `store.state`，只存在于模块中
  commit,     // 等同于 `store.commit`
  dispatch,   // 等同于 `store.dispatch`
  getters,    // 等同于 `store.getters`
  rootGetters // 等同于 `store.getters`，只存在于模块中
}

同时如果有第二个参数 payload 的话也能够接收。
action 中的函数参数 { commit } 是一个解构赋值语法，用于从参数对象中提取 Vuex 的 commit 方法。这种解构赋值语法允许你在函数内部直接调用 commit 而不必写成 context.commit。

store实例方法

dispatch

dispatch(type: string, payload?: any, options?: Object): Promise<any>

用于触发一个action,通常，dispatch 方法接受两个参数：

第一个参数是要触发的 action 的名称，例如 'auth/login'，这个名称通常以命名空间形式表示，用于区分不同模块的 action。
第二个参数是一个可选的 payload，可以是一个对象，用于传递额外的数据给 action。

modules

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter。