VUEX的介绍和使用方式

Vuex 简介

Vuex 是专为 Vue.js 应用设计的状态管理模式，它可以帮助开发者在组件之间更方便地共享数据。Vuex 使用集中化的方式来管理应用的状态，将应用中所有共享的状态存储在一个 store 中。这样可以避免组件之间因为数据共享而产生的复杂交互，提升代码的可维护性和可扩展性。

Vuex 的核心思想是将应用状态集中存储在一个地方，并且只有通过特定的方式（mutations）才能修改这些状态，从而保证数据的可预测性和一致性。

Vuex 的核心概念

Vuex 有几个核心概念：state、mutations、actions 和 getters，每个概念在数据流中起到不同的作用。

1. State

state 是 Vuex 中用来存储共享数据的地方。所有的共享数据都定义在 state 中，state 中的数据是响应式的，任何组件中使用到 state 的地方都会根据数据的变化而更新。

我们可以在 Vuex 的 store 中定义一个 state 对象：

new Vuex.Store({
  state: {
    name:"未登录游客"
  }
});

上面的例子中,name是一个共享数据。任何使用这个 store 的组件都可以访问name，并且当name 的值变化时，所有引用它的组件会自动更新。

2. Mutations

mutations 是 Vuex 中用于修改 state 的唯一途径。我们只能通过 mutations 来改变 state 中的数据，不能在其他地方直接修改 state。这样做的目的是保证状态的可预测性，使得每次状态的改变都是明确和可追踪的。

每个 mutation 函数会接收两个参数：当前的 state 和传递的参数 payload。例如，下面是一个修改 name 值的 mutation：

const store = new Vuex.Store({
  state: {
    name:"未登录游客"
  },
  mutations: {
    setName(state, newName) {
      state.name = newName;
    }
  }
});

在组件中，我们可以通过 store.commit('setName', "xwz") 来调用这个 mutation，从而实现对 state.count 的增加操作。

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  methods: {
    handleUpdate() {
      // mutations中定义的函数不能直接调用，必须通过这种方式来调用
      // setName为mutations中定义的函数名称，lisi为传递的参数
      this.$store.commit('setName', 'lisi')
    }
  }
}

这边我定义了一个 Vue 组件，其中包含一个 handleUpdate 方法。该方法通过 this.$store.commit 调用 Vuex 中的 mutations，其中 setName 是 mutations 中定义的函数名称，xwz 是传递的参数。

3. Actions

actions 是专门用于处理异步操作的。actions 中的函数不能直接修改 state，而是需要调用 mutations 来实现对 state 的修改。这样做是为了将异步操作和同步操作分开，使得数据流更加清晰。

actions: {
  setNameByAxios(context) {
    axios({
      url: '/api/admin/employee/login',
      method: 'post',
      data: {
        username: 'admin',
        password: '123456'
      }
    })
    .then(res => {
      if (res.data.code == 1) {
        // 异步请求后，需要修改共享数据
        // 在actions中调用mutation中定义的setName函数
        context.commit('setName', res.data.data.name)
      }
    })
  }
}

组件中调用 setNameByAxios

在 Vue 组件中，我们可以使用 this.$store.dispatch('setNameByAxios') 来调用这个 action。

 computed: {
    name() {
      return this.$store.state.name
    }
  },
  methods: {
    updateName() {
      // 通过 dispatch 调用 action 中的 setNameByAxios
      this.$store.dispatch('setNameByAxios')
    }
  }

4.Vuex 的数据流

Vuex 的数据流是单向的，而且非常清晰：

1. 组件通过 dispatch 发起 action。
2. action 可以进行异步操作，然后通过 commit 调用 mutation。
3. mutation 会同步地修改 state。
4. state 的变化会更新所有引用到该状态的组件。

5.使用 Vuex 的步骤

1. 在 store 对象的 state 属性中定义共享数据。state 是 Vuex 的数据存储，存放的是全局的共享状态。
2. 在 store 对象的 mutations 属性中定义修改共享数据的函数。每个 mutation 都是一个同步函数，用来改变 state 中的数据。
3. 在 store 对象的 actions 属性中定义调用 mutation 的函数。actions 主要用于异步操作，比如获取数据、处理耗时操作。
4. mutations 中的函数不能直接调用，只能通过 store.commit 方法调用。这是因为 Vuex 希望所有的状态变更都可以被追踪，使用 commit 可以更好地控制和记录数据变化。
5. actions 中定义的函数也不能直接调用，只能通过 store.dispatch 方法来调用。这样做的好处是可以更好地处理异步逻辑，将 dispatch 作为调用入口。