vuex的基础用法

2018-02-11 本文已影响58人刈懋

前言

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
1. 更新store中的状态，只能以提交mutation的方式改变
2. 每个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数字叠加。

vuex的基础用法

前言

vuex 介绍

vuex 使用

猜你喜欢

热点阅读