前言
vuex在vuejs构建大型项目的时候，是必不可少的。网上对他的介绍很多，官网介绍的也很详细。但是自己还是想结合官网总结自己的一篇。
vuex 介绍
状态存储仓库，官网定义请走这里
vuex 使用
用之前下载依赖下，官网的脚手架最开始并没有推荐安装，所以还是老老实实下载... （如果下载不成功，那就用淘宝镜像吧，一毛一样...）
npm install vuex --save
这里按照官方文档，让我们来撩开vuex的围裙...
按照官网文档的介绍，vuex的核心概念包含有：State,Getter,Mutation,Action,Module 这五个...,下面将一一介绍他们的概念和用法。
- 准备
在介绍下面五个模块前，我们先使用vue-cli脚手架创建一个项目，在src下，创建一个vuex文件，再在vuex文件里，创建一个store.js(可自定义，非必须) ，引入vue和vuex，初始化对象，在根目录注入，创建一个组件，就可以访问你访问的属性了...
// store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
count:0
}
const store = new Vuex.Store ({
state
})
export default store
//main.js 在根组件注入，全局就可以访问到了
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './vuex/store' // 引入
new Vue({
el: '#app',
router,
store, // 注入
components: { App },
template: '<App/>'
})
// index.vue 组件里访问
<template>
<div>
{{count}}
{{$store.state.count}}
</div>
</template>
<script>
import { mapState } from 'vuex'
import store from 'vuex'
export default {
computed:{
...mapState({
count:state => state.count
})
// ...mapState(['count']) 效果同上
}
}
</script>
这里访问store.js定义的count有两种方式，一种是使用this.$store.state.count,另外一种使用辅助函数mapState访问。（以下，将对store.js和index.vue扩展，默认vuex实例注入根组件）
-
State
state 就是你自定义状态，就像组件里data钩子函数里定义的变量一样。第一个案例也做了简单的介绍。官网请走这里。 在实际中，我最多使用就是mapState辅助函数，在计算属性的钩子获取，后面也可以使用Getter替代...
Getter
作用：防止重复性劳动。getter会缓存值，依赖改变，也会相应更新缓存值。getter接受state作为第一个参数,根据state的值,来修改值,然后暴露store.getter对象。
//修改store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
count:0
}
const getter = {
getNum(state){
return state.count;
}
}
const store = new Vuex.Store ({
state,
getter
})
export default store
// 修改index.vue
<template>
<div>
{{getNum}}
{{$store.getters.getNum}}
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import store from 'vuex'
export default {
computed:{
...mapGetters(['getNum']),
},
}
</script>
在div标签里，获取的值是一样，一个是直接获取（下面一个），不需要引入辅助函数。而另一需要借助辅助函数。当然getter有第二个参数，把其他getter作为参数来使用。（不能异步）
- Mutation
- 更新store中的状态，只能以提交mutation的方式改变
- 每个mutation都有一个事件类型（type）和一个回调函数，当触发事件类型，调用该函数，就像原生的点击事件一样...
// 事件类型click，触发一个回调
$('#id').on('click',function(){
alert('ok')
})
如果我们我们在commit之外，额外传递参数，就需要mutation的载荷（payload），载荷可以为一个值，也可以为一个对象。
下面我们来简单的例子，来看下mutation的使用
//点击按钮，实现累加的效果
// store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
count:0
}
<!--const getters = {-->
<!-- getNum(state){-->
<!-- return state.count;-->
<!-- }-->
<!--}-->
const mutations = {
increment(state,payload){
state.count += payload.amount;
}
}
const store = new Vuex.Store ({
state,
<!--getters,-->
mutations
})
export default store
// index.vue
<template>
<div>
{{ count }}
<button @click="add">按钮</button>
</div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
export default {
computed:{
...mapState({
count:state => state.count
}),
},
methods:{
...mapMutations(['increment']),
add(){
this.$store.commit({
type:'increment',
amount:10
})
}
}
}
</script>
如上案例，根据对象提交载荷，实现页面每次累加10。
mutation 的事件类型可以用常量来替代，最大的好处就是提高代码的可阅读性,后面在做介绍。非常重要的一点是，mutation是同步函数，为了实时捕捉到state中的状态。但是没有异步，要它何用? 下面就是他的好基友action，两个用法一直，区别有，action提交mutation,不是直接改变状态，mutation是直接能改变状态了，action可以是异步操作。
action 接受一个和store实例具有相同属性和方法的context对象，但不是store实例对象。因为module，在module可以包含像content实例，但是store实例就只有一个。
const getters = {
getNum(context){
console.log(context)
context.commit('increment')
}
}
看看打印出的值
这个时候，我们可以解构下...
const getters = {
getNum({commit}){
commit('increment')
}
}
// 效果和上面一毛一样
现在我们把整个代码贴一下,还是实现那个累加的效果
// index.vue 修改如下
<template>
<div>
{{ count }}
<button @click="add">按钮</button>
</div>
</template>
<script>
import { mapState } from 'vuex'
import store from 'vuex'
export default {
computed:{
...mapState({
count:state => state.count
})
},
methods:{
add(){
this.$store.dispatch({
type:'incrementAsync',
amount:10
})
}
}
}
</script>
// store.js 修改如下
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
count:0
}
const getters = {
getNum(state){
return state.count;
}
}
const mutations = {
increment(state,payload){
state.count += payload.amount;
}
}
const actions = {
incrementAsync({commit},payload){
commit('increment',payload)
}
}
const store = new Vuex.Store ({
state,
getters,
mutations,
actions
})
export default store
当前该组件分发action，使用this.$store.dispatch('xxx')来分发。当让我们最常用的还是用辅助函数mapActions，来改版下...
//index.vue
<template>
<div>
{{ count }}
<button @click="add">按钮</button>
</div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
import store from 'vuex'
export default {
computed:{
...mapState({
count:state => state.count
})
},
methods:{
...mapActions(['incrementAsync']),
add(){
this.incrementAsync({
amount:10
})
}
}
}
</script>
// mapActions 也是支持载荷，我们也可以尝试下...
<template>
<div>
{{ count }}
<button @click="incrementAsync({amount:10})">按钮</button>
</div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
import store from 'vuex'
export default {
computed:{
...mapState({
count:state => state.count
})
},
methods:{
...mapActions(['incrementAsync']),
}
}
</script>
// 和上面实现的效果是一样的，当没有载荷（其他参数），就可以在标签上直接绑定incrementAsync方法。
当前我们使用action最凸显的有点就是异步,我们可以使用setTimeout或者setInterval 来模拟下异步。
//这里我们只需要修改store.js里的acitons就可以了
const actions = {
incrementAsync({commit},payload){
setTimeout(() => {
commit('increment',payload)
},1000)
}
}
// 每隔1秒钟，数字累加10
组合action，利用promise，async/await来实现按自己的要求action函数触发顺序。 具体查看vuex官网，介绍的很详细，这里就不多做介绍。
- Module
vuex 可以将store分割成不同的模块,现在我们把上面案例分割成不同模块。在store.js 同级目录新建 actions.js、types.js、mutations.js、getter.js 来简单模拟下...
//store.js
import Vue from 'vue'
import Vuex from 'vuex'
import actions from './actions'
import getters from './getters'
import mutations from './mutations'
Vue.use(Vuex)
const store = new Vuex.Store ({
getters,
actions,
modules:{
mutations
}
})
export default store
// actions.js
import { ADDNUM } from './types'
const actions = {
incrementAsync({commit},payload){
setTimeout(() => {
commit(ADDNUM,payload)
},1000)
}
}
export default actions
// types.js
export const ADDNUM = 'ADDNUM';
// mutations.js
import { ADDNUM } from './types';
const state = {
count:0
}
const mutations = {
[ADDNUM](state,payload){
state.count += payload.amount;
}
}
export default {
state,
mutations
}
//getter.js
const actions = {
getNum(state){
return state.mutations.count
}
}
export default actions;
//index.vue
<template>
<div>
{{ getNum }}
<button @click="add">按钮</button>
</div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
export default {
computed:{
...mapGetters(['getNum'])
},
methods:{
...mapActions(['incrementAsync']),
add(){
this.incrementAsync({
amount:10
})
}
}
}
</script>
以上就是一个简单的demo，实现点击按钮，数字一秒后，以10数字叠加。
