Vue.js 中使用 Vuex 管理多个组件间状态
Vue.js 是一款轻量级的前端框架，有着极佳的模块化能力，可以将页面拆分为多个组件。然而，当多个组件需要共享状态时，由于 Vue.js 的传参和事件机制的限制，将变得非常麻烦。
Vuex 是一种专为 Vue.js 应用开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。使用 Vuex 可以方便地解决组件间状态的共享问题。
Vuex 状态管理模式的核心概念：
- state：组件共享的状态，存储在一个集中的对象里，类似于 Vue 组件中的 data。
- getters：可以理解为 store 的计算属性，用于监听 state 中值的变化。
- mutations：修改 state 的方法，必须是同步的。通过提交 mutation 可以修改 state 中的数据，只在 mutation 函数中修改 state，而不是在组件内部直接操作 state。
- actions：类似于 mutations，用于提交 mutation。但是可以添加异步操作，例如从服务器获取数据，获得返回结果后再提交 mutation。通过提交 action 可以触发 mutation，间接修改 state。
Vuex 状态管理模式的基本实现方法：
- 创建一个 store：Vue.js 应用中只能有一个 store，使用 new Vuex.Store() 创建。
- 在 store 中定义 state：state 必须是一个对象。
- 在 store 中定义 getters：getters 可以接受 state 作为第一个参数，也可以接受其他 getters 作为第二个参数。它们还可以接受一个 compute 作为第二个参数，以动态的传递参数到 getter。
- 在 store 中定义 mutations：mutations 必须是同步函数，接受 state 作为第一个参数，payload 作为第二个参数。执行 mutations 的唯一方法是提交(commit) mutations。
- 在 store 中定义 actions：actions 可以有异步操作，接受一个 context 对象，可以根据需要解构出 commit、dispatch、getters 等属性。执行 actions 的方法是调用 dispatch。
下面是一个使用 Vuex 管理多个组件间状态的示例代码：
安装 Vuex：
npm install vuex –save创建 store.js 文件：
-- -------------------- ---- ------- ------ --- ---- ----- ------ ---- ---- ------ ------------- ----- ----- - --- ------------ ------ - ------ -- ----- -- -- -------- - --------- ----- -- - ------ ----------- -- -------- ----- -- - ------ ---------- - -- ---------- - ---------------- ---- - ----------- -- --- -- --------------- ----- - ---------- - ---- - -- -------- - ---------- ------ -- ---- - ------------------- ---- -- --------- ------ -- ----- - ------------------ ----- - - -- ------ ------- -----
展开代码在 main.js 文件中引入 store：
import Vue from 'vue' import App from './App.vue' import store from './store' new Vue({ render: h => h(App), store }).$mount('#app')
在组件中获取和修改 state：
-- -------------------- ---- ------- ---------- ----- -------------------- ------------------- ------- ------------------ -------------- ------- ---------------------- ------------- ------ ----------- -------- ------ - --------- ----------- ---------- - ---- ------ ------ ------- - --------- - --------------------- --------- -------------------------- ----------- -- -------- - -------------------------- ------------ ----- - ---------------- -- --------- - ------------------ ----- - - - ---------
展开代码
通过以上代码的实现，我们可以发现使用 Vuex 管理多个组件间状态的正确方式，避免了组件状态混乱的情况，也让前端开发更简单高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67baef9e306f20b3a6a1d645
