大前端之路-vuex 速览

2020-02-15

vuex 是什么?可以解决什么问题?

个人理解 就是单页应用中 多个组件之间 共享数据的 状态机通用管理机制。有点类似于java中的观察者模式,在android中类似的有eventbus。中大型应用应该都会用到。

如果你跟我一样是有移动开发经验的前端新人,那么最好还是学习一下这个东西,以后遇到类似问题就可以直接哪来用了。

当然了,不要滥用vuex,能用参数传递的,还是尽量参数传递

快速在单页应用中共享数据

比如说 我们先在compa 中 对一个数据 进行加操作,然后再另外一个comb中 就可以拿到 加加以后的值。 听起来有一点像java中的单例。 在vuex 中 我们来实现一下

首先,我们来看下简单的目录结构:

然后看下store.js

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

Vue.use(Vuex)

//要共享的数据
const state = {
    count: 1
}

//对共享数据的操作
const mutations = {
    add(state) {
        state.count++
    },
    reduce(state) {
        state.count--
    }

}

//把这个状态 暴露出去 也就是 数据 和对应数据的操作
export default new Vuex.Store({
    state, mutations
})

看看我们的Count.vue 怎么对 共享数据进行操作

<template>
    <div>
        <h2>{{msg}}</h2>
        <hr>
        <h3>{{$store.state.count}}</h3>

        <p>
            <button v-on:click="$store.commit('add')">+</button>
            <button v-on:click="$store.commit('reduce')">-</button>

        </p>
    </hr></div>

</template>

<script>
import store from "@/vuex/store";

export default {
  data() {
    return {
        msg:'hello vuex'
    };
  },
  store
};
</script>


注意这里点击事件的写法。

最后看看观察者,其实观察者没啥好说的,最好写了。

<template>
    <div>
        <h2>{{msg}}</h2>
        <hr>
        <h3>{{$store.state.count}}</h3>

    </hr></div>

</template>

<script>
import store from "@/vuex/store";

export default {
  data() {
    return {
        msg:'hello vuex  观察者'
    };
  },
  store
};
</script>


至此,我们就可以完成 在count页面中操作数据 但是其他页面也可以接收到数据的变化通知 这个功能了。

vuex中 如何简洁的获取状态对象的值

state 其实就是状态对象,mutations 就是对状态对象操作的方法。

来看看上面的例子的缺陷:

换种写法:

再换一种:

再来一种最简单的方法:

vuex 状态管理器

先来看一下 如果我们对状态对象的操作方法里面 要传递参数 应该怎么做

先定义一下这个函数:

然后看一下 我们怎么调用他

<button v-on:click="$store.commit('addN',5)">一次性加5</button>

最后看看我们调用方法的简写 应该怎么写

vuex 中的计算属性 getters

这个地方其实就是一个过滤器的作用,举个例子,我们有一组销售的数据。 但是我取的时候 我想取最近100天销售的数据 那我肯定要对源数据处理以后生成新的数据(不修改源数据的情况下) 再返回。

举个例子

定义getters

使用它

最后看一下效果

最后提一下,对于java技术栈的同学来说,一定不要在 任何属性里的get方法中加入特殊的逻辑

action 异步修改状态

前面提到的mutation也可以修改状态,只不过他是同步的,而action是异步的。

//一般而言 我们可以在actions对象中 处理一些要异步处理的操作
const actions = {
    //上下文对象 
    addAction(context) {
        context.commit('add', 10)
        setTimeout(() => {
            context.commit('reduce')
        }, 5000)
    },
    reduceAction({ commit }) {
        commit('reduce')
    }
}

然后看一下调用方:

module 模块组 ---大项目专用

个人觉得 这个module 只有大型项目会用,一般小团队用这个反而增加复杂度。这里就知道有这么个东西即可。 讲白了这个东西还是偏向工程性质的多一点,而不是功能性的。 适用于大项目 进行模块化开发的。

定义module

使用module

想要简写方法也可以

如果你对module 感兴趣,可以参阅module官方文档

原文链接:juejin.im

上一篇:CSS网页响应式布局 自动适配Pc/Pad/Mobile设备
下一篇:前端html5基础
相关教程
关注微信

扫码加入 JavaScript 社区

相关文章

首次访问,需要验证
微信扫码,关注即可
(仅需验证一次)

欢迎加入 JavaScript 社区

号内回复关键字:

回到顶部