Vuex全局的状态统一管理，解决组件之间状态共享和数据通信的问题。

第一步

store.js

第二步

main.js

import Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'

Vue.config.productionTip = false

new Vue({  router,  store, // 增加store属性，值是导出store的实例  render: h => h(App)}).$mount('#app')

通过上面两个步骤，每个组件中都有了$store属性，就是我们创建的容器。里面有commit,dispatch,state,getters,actions,mutations，在每个组件中可以通过this.$store打印出来看看。

开始使用

定义状态

export default new Vuex.Store({state: {    count: 1 // state中定义响应式的数据  }})

使用状态：在store的state中定义的状态count，在组件中可以使用this.$store.state.count获取。

定义mutations

在store的mutations中添加对应的方法

export default new Vuex.Store({  state: {    count: 1 // state中定义响应式的数据  },  mutations: {    addTen (state, num) {        state.count = state.count + num    }  },  actions: {

  }})

提交mutations
组件中通过commit提交mutations去修改state中的状态

this.$store.commit('addTen', 10)

定义actions
在store的actions中添加对应的方法

export default new Vuex.Store({state: {count: 1  },mutations: {    addTen (state, num) {// 第一个参数是状态，第二个是传入的参数        state.count = state.count + num    }  },actions: {    minusTen ({commit}, num) {// 第一个参数是store实例，第二个是传入的参数        setTimeout(() => {            commit('addTen', num)        }, 1000)    }  }})

派发动作
组件中可以使用dispatch派发一个动作，来触发actions中的方法，actions可以异步的提交mutations去修改state中的状态

this.$store.dispatch('minusTen', 10)

actions主要是复用，封装代码，处理异步，请求接口等等，真正修改状态放到了mutations中处理

定义getters
在store的getters中添加对应的方法

export default new Vuex.Store({state: {count: 1,person: {name: '张三'    }  },getters: {    getName (state) {// getters是同步的return state.person.name    }  }})

使用getters

this.$store.getters.getName

getters定义的方法相当于计算属性，相当于定义在computed一样，有缓存，依赖改变会重新计算。

组件代码演示

<template><div class="hello"><h1>{{ this.$store.state.count }}</h1><h1>{{ this.$store.getters.getName }}</h1><button @click="syncAdd">同步加10</button><button @click="asyncAdd">异步加10</button></div></template>

<script>export default {methods: {    syncAdd () {this.$store.commit('addTen', 10)    },    asyncAdd () {this.$store.dispatch('minusTen', 10)    }  }}</script>

简写

上面的写法都是在this.$store中获取属性或方法进行操作。

this.$store.state.countthis.$store.getters.getNamethis.$store.commit('addTen', 10)this.$store.dispatch('minusTen', 10)

但是这些操作写起来比较繁琐，每次都要写this.$store，为了简写，所以vuex提供了一些映射的方法，直接导入到组件中就可以使用了。

<template><div class="hello"><h1>{{ count }}</h1><h1>{{ getName }}</h1><button @click="syncAdd">同步加10</button><button @click="asyncAdd">异步加10</button></div></template>

<script>import {mapActions, mapState, mapMutations, mapGetters} from 'vuex'export default {computed: {    ...mapState(['count']),    ...mapGetters(['getName'])  },methods: {    syncAdd () {this.addTen(10)    },    asyncAdd () {this.minusTen(10)    },    ...mapActions(['minusTen']),    ...mapMutations(['addTen'])  }}</script>

有一点需要说明的是，使用扩展运算符，表示这些方法返回的都是对象，mapState和mapGetters需要定义在计算属性中，因为他们定义的数据是响应式的。而mapActions和mapMutations需要定义在methods中。

拆分模块

状态是可以分层的，当一个项目维护的状态太多，可以拆分成单独的模块，在定义store中有个modules属性，里面可以定义单独的模块。

import Vue from 'vue'import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({modules: {'page1': {namespaced: true,state: {count: 1,person: {name: '张三'        }      },mutations: {        addTen (state, num) {          state.count = state.count + num        }      },actions: {        minusTen ({commit}) {          setTimeout(() => {            commit('addTen', 10)          }, 1000)        }      },getters: {        getName (state) {return state.person.name        }      }    }  }})

在组件中这样用

<template><div class="hello"><h1>{{ count }}</h1><h1>{{ getName }}</h1><button @click="syncAdd">同步加10</button><button @click="asyncAdd">异步加10</button></div></template>

<script>import {mapActions, mapState, mapMutations, mapGetters} from 'vuex'export default {computed: {    ...mapState('page1', ['count']),    ...mapGetters('page1', ['getName'])  },methods: {    syncAdd () {this.addTen(10)    },    asyncAdd () {this.minusTen(10)    },    ...mapActions('page1', ['minusTen']),    ...mapMutations('page1', ['addTen'])  }}</script>

每个方法都传了两个参数，第一个参数指定命名空间，第二个参数是对应的属性，为了进一步简写，可以通过帮助函数指定命名空间，指定当前组件在使用的模块。

<template><div class="hello"><h1>{{ count }}</h1><h1>{{ getName }}</h1><button @click="syncAdd">同步加10</button><button @click="asyncAdd">异步加10</button></div></template>

<script>import { createNamespacedHelpers } from 'vuex'// 创建帮助函数指定命令空间let { mapActions, mapState, mapMutations, mapGetters } = createNamespacedHelpers('page1')

export default {computed: {    ...mapState(['count']),    ...mapGetters(['getName'])  },methods: {    syncAdd () {this.addTen(10)    },    asyncAdd () {this.minusTen(10)    },    ...mapActions(['minusTen']),    ...mapMutations(['addTen'])  }}</script>

不使用简写

this.$store.getters['page1/getName']this.$store.state.page1.countthis.$store.commit('page1/addTen', 10)this.$store.dispatch('page1/minusTen', 10)

推荐图书