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: { } }) ```