http://jsrun.net/CcLKp/edit ## Vuex Vuex是Vue.js 的狀態管理模式。 適用在大型單頁應用。 ## 核心內容 * state 存放狀態數據 * mutations ， 對state的成員操作 * getters 加工state成員給外界使用 * actions 異步操作 * modules 模塊化狀態管理 ## Vuex VS. 簡單的store模式 ``` var store = { debug: true, state: { message: 'Hello!' }, setMessageAction (newValue) { if (this.debug) console.log('setMessageAction triggered with', newValue) this.state.message = newValue }, clearMessageAction () { if (this.debug) console.log('clearMessageAction triggered') this.state.message = '' } } ``` Store ，倉庫，基本就是一個容器， 包含著應用中大部分狀態(state)。 ## Vuex VS. 單純的全局對象 1. Vuex 的狀態存儲是響應式的，Store變化，組件也自動變化 2. 不能直接改變Store中代替狀態 ## Vuex 使用示例 ``` <template> <div> <h2>Store Demo</h2> <hr> <h4> {{$store.state.myCount}}</h4> <button @click="addMethod"> Add </button> </div> </template> <script> import store from '@/store' export default { name:'myCount', store, data(){ }, methods:{ addMethod(){ this.$store.commit('add'); } } } </script> <style scoped> </style> ``` ``` export default new Vuex.Store({ state: { myCount:1 }, mutations: { add(state){ state.myCount++; },minus(state){ state.myCount--; } }, actions: { }, modules: { } }) ```