vue狀態管理vuex使用之專案中如何合理引入vuex
阿新 • • 發佈:2018-11-13
在前端開發過程中,狀態的管理是一件很令人頭疼的事情。尤其是在專案中,涉及同一狀態的元件越多,在元件狀態管理上,通過父子元件之間通訊來更新狀態將變的複雜。Vue專案開發過程中,藉助vuex進行狀態管理將極大的減輕我們在開發過程中對於元件狀態的維護。
vuex:
vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式。它採用集中式儲存管理應用的所有元件的狀態,並以相應的規則保證狀態以一種可預測的方式發生變化。
Vuex 的狀態儲存是響應式的。當 Vue 元件從 store 中讀取狀態的時候,若 store 中的狀態發生變化,那麼相應的元件也會相應地得到高效更新。
你不能直接改變 store 中的狀態。改變 store 中的狀態的唯一途徑就是顯式地提交 (commit) mutation 。這樣使得我們可以方便地跟蹤每一個狀態的變化,從而讓我們能夠實現一些工具幫助我們更好地瞭解我們的應用。
那麼如何合理的將vuex引入我們的專案當中?大致可分為以下幾個步驟:
1. 新建vuex狀態管理資料夾於src/ 下
2. store/index.js 中引入vuex
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: { count: 1 }, mutations: { add(state) { state.count += 1; }, reduce(state) { state.count -= 1; } } }) export default store;
3. 在專案入口檔案 main.js 中引入vuex
import Vue from 'vue' import Layout from './layout' import router from './router' Vue.config.productionTip = false // 引入vuex import store from './store' /* eslint-disable no-new */ new Vue({ el: '#app', router, store, components: { Layout }, template: '<Layout/>' })
至此,在我們的專案開發過程中,我們可以在 store.js方便地管理我們專案元件中的狀態了。關於如何來合理使用vuex 博主將在接下來的博文中,進行更加清晰的敘述。