Vuex状态管理——入门基础

---

Vue是什么？

Vuex 是 Vue.js 应用程序的状态管理库，用于管理组件之间共享的状态。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态的一致性。Vuex 可以帮助你更好地组织和管理你的 Vue 应用的状态。

---

一、为什么使用Vuex？

在大型的 Vue 应用中，多个组件可能需要共享某些状态，而且状态的变化可能会影响到整个应用的行为。使用 Vuex 可以帮助你更容易地管理这些状态，避免了状态分散在多个组件之间的问题。它提供了一种可预测的状态管理机制，使得状态变更更易于追踪和调试。

二、Vuex 的核心概念：

1.State（状态）： 应用中需要共享的数据存储。
2.Getters（获取器）： 用于从 state 中派生出一些状态，类似于计算属性。
3.Mutations（突变）： 用于修改 state 中的数据，是同步的。
4.Actions（动作）： 用于处理异步操作或复杂逻辑，并提交 mutations。
5.Modules（模块）： 用于将 store 拆分成模块，每个模块有自己的 state、getters、mutations、actions。

三、如何使用Vuex？

1.安装Vuex

代码如下（示例）：

npm install vuex --save

2.创建 Vuex Store

代码如下（示例）：

import Vue from "vue";
import Vuex from "vuex";
import axios from "axios";

Vue.use(Vuex);

// 集中管理多个组件共享的数据
export default new Vuex.Store({
  // 集中定义共享数据
  state: {
    name: "未登录游客",
  },
  getters: {},
  mutations: {
    setName(state, newName) {
      state.name = newName;
    },
  },

  // 通过action调用mutation，在action中可以进行异步操作
  actions: {
    setNameByAxios(context) {
      axios({
        url: "/api/admin/employee/login",
        method: "post",
        data: {
          username: "admin",
          password: "123456",
        },
      }).then((res) => {
        if (res.data.code == 1) {
          // 异步请求后修改共享数据
          // 在action中调用mutation的函数
          context.commit("setName", res.data.data.name);
        }
      });
    },
  },
  modules: {},
});

3.在主应用中挂载 Vuex Store：

import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

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

4. 在组件中使用 Vuex：

<template>
  <div id="app">
    <h1>欢迎你{{ $store.state.name }}</h1>
    <img alt="Vue logo" src="./assets/logo.png">
    <button @click="setName">设置名称</button>
    <button @click="handleAxios">调用action中的函数</button>
    <HelloWorld msg="Welcome to Your Vue.js App" />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  methods: {
    setName() {
      // mutation中定义的函数不能直接调用，必须通过这个this.$store.commit
      // setName为mutation中定义的函数名称，Tom为传递的参数
      this.$store.commit('setName', 'Tom')
    },
    handleAxios() {
      // 调用action中定义的函数，setNameByAxios为函数名称
      this.$store.dispatch('setNameByAxios',)
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

---

总结

①如何理解Vuex?

• 【1】实现多个组件之间的数据共享
• 【2】共享数据是响应式的，实时的渲染
• 【3】可以集中管理共享数据

② 如何使用Vuex?

• 【1】在store中state属性定义共享数据
• 【2】在mutations中定义共享数据的函数
• 【3】在actions属性中调用mutation的函数，进行异步操作
• 【4】mutation中只能通过store对象的commit方法进行调用
• 【5】action中定义的函数不能直接调用，只能通过store对象的dispatch方法调用