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', 'xwz')}}
}这边我定义了一个 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 中的 setNameByAxiosthis.$store.dispatch('setNameByAxios')}}4.Vuex 的数据流
Vuex 的数据流是单向的，而且非常清晰：
- 组件通过
dispatch发起action。 action可以进行异步操作，然后通过commit调用mutation。mutation会同步地修改state。state的变化会更新所有引用到该状态的组件。
5.使用 Vuex 的步骤
- 在
store对象的state属性中定义共享数据。state是 Vuex 的数据存储，存放的是全局的共享状态。 - 在
store对象的mutations属性中定义修改共享数据的函数。每个mutation都是一个同步函数，用来改变state中的数据。 - 在
store对象的actions属性中定义调用mutation的函数。actions主要用于异步操作，比如获取数据、处理耗时操作。 mutations中的函数不能直接调用，只能通过store.commit方法调用。这是因为 Vuex 希望所有的状态变更都可以被追踪，使用commit可以更好地控制和记录数据变化。actions中定义的函数也不能直接调用，只能通过store.dispatch方法来调用。这样做的好处是可以更好地处理异步逻辑，将dispatch作为调用入口。
