美文网首页
vuex的基础用法

vuex的基础用法

作者: 刈懋 | 来源:发表于2018-02-11 17:28 被阅读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的基础用法

    前言 vuex在vuejs构建大型项目的时候，是必不可少的。网上对他的介绍很多，官网介绍的也很详细。但是自己还是想...

  • Vuex源码解析

    手写vuex核心代码 vuex基本用法 分析 我们是通过new Vuex.store(option)获得一个sto...

  • vuex用法

    前言 看了网上很多关于用vuex的例子，但是千篇一律都是在页面加两个按键加减什么的，或者将一些半吊子理论，但是在实...

  • Vuex 用法

    Vuex简单的来说就是vue项目中的属于状态管理的插件。因为项目中也有用到，下面我说下具体用法。当然很简单的啦。这...

  • VUEX用法

    1. import Vue from 'vue'import Vuex from 'vuex'import mut...

  • vuex用法

    vuex vuex解决不同组件的数据共享，数据持久化。 1.安装： npm install v...

  • Vuex的用法

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 个人理解：就是在项目中可以对在state中定义的变...

  • VueJs对比ReactJs

    VueJs的用法： 状态管理 Vuex实现状态管理,针对数据的持久化存储的需求可以使用vuex-persisted...

  • vuex的基本用法

    个人对vuex的理解是，state中定义的变量类似java中的全局变量，将各组件用到的变量集中起来，统一管理，而g...

网友评论

      本文标题：vuex的基础用法

      本文链接：https://www.haomeiwen.com/subject/pzqltftx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|vuex的基础用法|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！