## 使用 ``` //配置vuex步驟 //1.運行 npm i vuex -S //2.導入包 import Vuex from 'vuex' //注冊vuex到vue中 Vue.use(Vuex); //4.new Vuex.Store() 實例,得到一個數據倉儲對象 var store = new Vuex.Store({ state: { //可以把state想象成組件中的data,專門存儲數據的 count: 0, }, //注意:如果要操作store中的state值,只能通過調用mutation提供的方法,才能操作對應的數據. //不推薦直接操作state,因為萬一導致了數據的紊亂,不能快速定位到錯誤的原因,因為每個組件都可能有操作數據的方法 //最多只能傳遞一個參數 mutations: { increment: function (state, params) { state.count++; }, //注意:如果組件想要調用mutation中的方法,只能使用this.$store.commit('方法名') //這種調用mutation方法的格式,和this.$emit()相似 decrement: function (state, params) { state.count -= params; } }, getters: { //注意:這里的getters,只負責對外提供數據,不負責修改數據,如果想要修改state中的數據,請去找mutations optCount: function (state) { return '當前最新的count值:' + state.count; //使用如下方式調用 // {{$store.getters.optCount}} //對比發現,發現getters中的方法和組件中的過濾器比較類似,因為過濾器和getters都沒有修改原數據,都是把元數據做了一層包裝,提供給了調用者. //其次,getters也和computed比較像,只要sate中的數據發生了變化,那么,如果getters正好也引用了這個數據,那么就會立即觸發getters的重新求值. } } }); //總結: //1.state中的數據,不能直接修改,如果想要修改,必須通過mutations //2.如果?想要直接從state上獲取數據:需要this.$store.state.*** //3.如果組件想要修改數據,必須使用mutations提供的方法,需要通過this.$store.commit('方法名稱',唯一的一個參數) //4.如果store中的state上的數據,在對外提供的時候,需要做一層包裝,那么,推薦使用getters,如果需要使用getters,則用this.$store.getters.*** Vue.config.productionTip = false; new Vue({ el: '#app', router, //5.掛載vue實例中 store, components: {App}, template: '<App/>' }); ```