vuex管理全域性變數、全域性方法
曾幾何時,我採用vue2框架寫了關於世界盃競猜主題的專案,裡面有多個檢視依賴於同一狀態,然後來自不同檢視的行為需要變更同一狀態。
想想以前稍簡單的多層元件巢狀採用父子傳值的方式搞得我已經夠難受(現在回憶起來氣都不順),現在如果還採用這種方式,可能連我都看不懂自己寫的程式碼了,連自己都不知道怎麼維護了!很慶幸,有一種狀態管理架構叫vuex,很慶幸,他能很好的解決我遇到的問題......
vuex是一個專門為vue.js設計的集中式狀態管理架構,用來管理公用屬性,真的是好用太多了!!!
那就開始吧!
1、利用npm包管理工具,進行安裝 vuex(前提是已經用Vue腳手架工具構建好專案,可參考ofollow,noindex">https://www.jianshu.com/p/023b7492833d )
npm install vuex --save
2、新建一個store.js用於存放公共的屬性
在store.js中引用Vuex
import Vue from 'vue' import vuex from 'vuex' Vue.use(vuex)
3、在main.js中引用新建的store.js,並在例項化 Vue物件時加入 store 物件
import store from './store'
new Vue({ el: '#app', router, store,//使用store template: '<App/>', components: { App } })
配置好這些關聯檔案之後,我們可以開始狀態管理了~
下面是store.js狀態管理示例:
const store = new Vuex.Store({ state: { //唯一資料來源,我理解為宣告全域性變數 todos: [ { id: 1, text: '...', done: true }, { id: 2, text: '...', done: false } ], count:1 }, getters: {//針對state資料的過濾, doneTodos: state => { return state.todos.filter(todo => todo.done) } }, mutations: { //邏輯處理,但Mutation 必須是同步函式 increment (state) { // 變更狀態 state.count++ } }, actions: {//Action 類似於 mutation,Action 提交的是 mutation,而不是直接變更狀態;Action 可以包含任意非同步操作. setIncrement (context) { context.commit('increment') } } })
狀態管理邏輯寫好後,就可以在元件頁面呼叫, 假設我有個元件的名字叫matchVs.vue,我要呼叫公用的方法啦~
首先引用
import { mapState } from "vuex";
然後呼叫方法
computed: { ...mapState({ // 獲取count的值,此時獲取到count的值為2 count: state => state.count }) }, created() { //頁面建立的時候,就呼叫該方法 this.$store.dispatch("setIncrement "); }
基本就是這麼用了,如果你的store比較大,uex 允許我們將 store 分割成模組(module)。每個模組擁有自己的 state、mutation、action、getter、甚至是巢狀子模組——從上至下進行同樣方式的分割。
const moduleA = { state: { ... }, mutations: { ... }, actions: { ... }, getters: { ... } } const moduleB = { state: { ... }, mutations: { ... }, actions: { ... } } const store = new Vuex.Store({ modules: { a: moduleA, b: moduleB } }) store.state.a // -> moduleA 的狀態 store.state.b // -> moduleB 的狀態
更多更詳細的,那就去看看文件吧https://vuex.vuejs.org/zh/