Vuex是一個專門為Vue.js應用程序開發的狀態管理模式 1.vuex解決了組件之間同一狀態的共享問題(解決了不同組件之間的數據共享) 2.組件里面數據的持久化 小項目不建議用vuex vuex的使用 1.在src目錄下新建vuex文件夾 2.vuex文件夾里面新建一個store.js 3.安裝vuex npm install vuex --save 4.在剛才創建的store.js引入vuex并且use.vuex ``` import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) ``` 5.定義數據 ``` // state 在vuex中用于存儲數據 var state = { count: 1 } ``` 6.定義方法 ``` // mutations里面話的是方法,方法主要用于改變state里面的數據 var mutations = { incCount () { ++state.count } } ``` // 7.有點類似計算屬性,改變state里面的count數據的時候會觸發 // getters里面的方法,獲取新的值(基本用不到) ``` var getters = { computedCount: (state) => { return state.count * 2 } } ``` // 8.Action類似于mutation,不同在于: // Action提交的是mutation,而不是直接變更狀態 // Action 可以包含任意異步操作 ``` var actions = { // 因此你可以調用context.commit提交一個mutations incMutationsCount (context) { // 執行mutations里面的incCount方法,改變state里面的數據 context.commit('incCount') } } ``` 暴露 ``` // 實例化Vuex.Store const store = new Vuex.Store({ state, mutations }) export default store ``` ***** 組件里使用vuex ``` 1.引入store `imprt store from '../vuex/store' ` ``` 2.注冊 ``` export default { data () { return { msg: '我是一個home組件' } }, store, methods: { count(){ this.$store.commit('incCount') } } } ``` 3.獲.取state里面的數據 ``` this.$store.state.數據 ``` 4.觸發 mutations改變state里的數據 ``` this.$store.commit('incCount') ``` 5.觸發actions里的方法 ``` this.$store.dispatch('incMutationsCount') ``` 6.獲取getters里面方法返回的數據 ``` {{this.$store.getters.computedCount}} ```