Vuex入门到上手

Vuex

一、前言

当我们的应用遇到多个组件共享状态时,会需要多个组件依赖于同一状态。传参的方法对于多层嵌套的组件将会非常繁琐,并且对于兄弟组件间的状态传递无能为力。在搭建下面页面时,你可能会对 vue 组件之间的通信感到崩溃 ,特别是非父子组件之间通信。此时就应该使用vuex,轻松可以搞定组件间通信问题。

组件间通信

二、什么是Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。这里的关键在于集中式存储管理。这意味着本来需要共享状态的更新是需要组件之间通讯的,而现在有了vuex,就组件就都和store通讯了

三、什么时候使用Vuex

虽然 Vuex 可以帮助我们管理共享状态,但也附带了更多的概念和框架。这需要对短期和长期效益进行权衡。 如果您的应用够简单,您最好不要使用 Vuex,因为使用 Vuex 可能是繁琐冗余的。一个简单的 global event bus 就足够您所需了。但是,如果您需要构建一个中大型单页应用,您很可能会考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的选择。

四、Vuex安装(限定开发环境为 vue-cli)

首先要安装vue-cli脚手架,对于大陆用户,建议将npm的注册表源设置为国内的镜像(淘宝镜像),可以大幅提升安装速度。

npm config set registry https://[registry.npm.taobao.org](http://registry.npm.taobao.org/)
npm config get registry//配置后可通过下面方式来验证是否成功
npm install -g cnpm --registry=[https://registry](https://registry/).npm.taobao.org
//cnpm安装脚手架
cnpm install -g vue-cli
vue init webpack my-vue
cd my-vue
cnpm install
cnpm run dev

脚手架安装好后,再安装vuex

cnpm install vuex --save

五、如何使用Vuex

1.如何通过Vuex来实现如下效果?

image

①创建一个store.js文件

import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)
const store = new Vuex.Store({
  state: {  //这里的state必须是JSON,是一个对象
    count: 1 //这是初始值
  },
  mutations: {//突变,罗列所有可能改变state的方法
    add(state) {
      state.count++; //直接改变了state中的值,而并不是返回了一个新的state
    },
    reduce(state){
        state.count--;
    }
  }
});
export default store;//用export default 封装代码,让外部可以引用

②在main.js文件中引入store.js文件

import store from "./vuex/store"
new Vue({
  router,
  store,
  el: '#app',
  render: h => h(App)
})

③新建一个模板count.vue

<template>
    <div>
       <h2>{{msg}}</h2><hr/>
       <h2>{{$store.state.count}}-{{count}}</h2>//这两种写法都可以
       <button @click="addNumber">+</button>
       <button @click="reduceNumber">-</button>
    </div>
</template>
<script>
import {mapState} from 'vuex'
export default {
  data() {
    return {
      msg: "Hello Vuex"
    };
  },
  methods: {
    addNumber() {
      return this.$store.commit("add");
    },
    reduceNumber() {
      return this.$store.commit("reduce");
    }
  },
  computed: mapState(['count'])// 映射 this.count 到 this.$store.state.count
                                 mapState 函数可以接受一个对象,也可以接收一个数组
};
</script>

由于 store 中的状态是响应式的,当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。在组件中调用 store 中的状态简单到仅需要在计算属性中返回即可。改变store 中的状态的唯一途径就是显式地提交 (commit) mutations。

这样,我们就可以实现自增1或是自减1,那假如我们想要点击一次实现自增2,这该如何实现,也就是如何向Mutations传值?

2.如何在Mutations里传递参数

先store.js文件里给add方法加上一个参数n

  mutations: {
    add(state,n) {
      state.count+=n;
    },
    reduce(state){
        state.count--;
    }
  }

然后在Count.vue里修改按钮的commit( )方法传递的参数

 addNumber() {
      return this.$store.commit("add",2);
    },
 reduceNumber() {
      return this.$store.commit("reduce");
    }

3.getters如何实现计算过滤操作

getters从表面是获得的意思,可以把他看作在获取数据之前进行的一种再编辑,相当于对数据的一个过滤和加工。你可以把它看作store.js的计算属性。

例如:要对store.js文件中的count进行操作,在它输出前,给它加上100。

首先要在store.js里Vuex.Store()里引入getters

getters:{
     count:state=>state.count+=100
  }

然后在Count.vue中对computed进行配置,在vue 的构造器里边只能有一个computed属性,如果你写多个,只有最后一个computed属性可用,所以要用展开运算符”…”对上节写的computed属性进行一个改造。

computed: {
    ...mapState(["count"]),
    count() {
      return this.$store.getters.count;
    }
  }

需要注意的是,此时如果点击'+',就会增加102,如果点击'-',就会增加99,最后的结果是mutations和getters共同作用的。

4.actions如何实现异步修改状态

actions和上面的Mutations功能基本一样,不同点是,actions是异步的改变state状态,而Mutations是同步改变状态

①在store.js中声明actions

  actions: {
    addAction(context) {
      context.commit('add', 2);//一开始执行add,并传递参数2
      setTimeout(() => {
        context.commit('reduce')
      }, 2000);//两秒后会执行reduce
      console.log('我比reduce提前执行');
    },
    reduceAction({
      commit
    }) {
      commit('reduce')
    }
  }

actions是可以调用Mutations里的方法的,调用add和reduce两个方法。在addAction里使用setTimeOut进行延迟执行。在actions里写了两个方法addAction和reduceAction,两个方法传递的参数也不一样。

context:上下文对象,这里你可以理解称store本身

{commit}:直接把commit对象传递过来,可以让方法体逻辑和代码更清晰明了

②模板中的使用

<p>
   <button @click="addNumber">+</button>
   <button @click="reduceNumber">-</button>
</p>
<p>       
   <button @click="addAction">+</button>//新增
   <button @click="reduceAction">-</button>//新增
</p>
import { mapState, mapGetters, mapActions } from "vuex";
methods:{
    ...mapMutations([  
        'add','reduce'
    ]),
    ...mapActions(['addAction','reduceAction'])
}

最后得到如下效果:点击addAction按钮事件时,先累加2,两秒后再减去1,而addNumber事件则不能实现异步效果。

image

ps:如果想访问源代码,请猛戳git地址

如果觉得本文对您有用,请给本文的github加个star,万分感谢

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏后台架构

Sphinx源码学习笔记(一):索引创建

  因为项目开发需要在游戏内部实现玩家名称的模糊查找功能,本身直接使用Sphinx配置mysql可以直接搭建一套模糊匹配的即可支持功能的实现。

2977
来自专栏Java3y

Servlet第五篇【介绍会话技术、Cookie的API、详解、应用】

什么是会话技术 基本概念: 指用户开一个浏览器,访问一个网站,只要不关闭该浏览器,不管该用户点击多少个超链接,访问多少资源,直到用户关闭浏览器,整个这个过程我们...

2985
来自专栏企鹅号快讯

盘点开发者最爱的 IntelliJ 插件 Top 10

关键时刻,第一时间送达! IntelliJ的十大插件?相信每个人都有自己的选择。我们也同样如此。在这里,我们为您带来我们认为的十大IntelliJ插件。 如果你...

1717
来自专栏java学习

每日一练(2017/5/15)

Java基础 | 数据库 | Android | 学习视频 | 学习资料下载 课前导读 ●回复“每日一练”获取以前的题目! ●答案公布时间:为每期发布题目的第二...

2677
来自专栏测试开发架构之路

C语言之实现控制台光标随意移动C语言实现控制台中光标随意移动

原理引入windows.h,首先是要获得输入的东西,然后通过判断: 1.方向键:执行上下左右的移动功能 2:回车键:执行换行的功能。 3.普通键:输入功能。 终...

3205
来自专栏腾讯IVWEB团队的专栏

你可能不知道的 ECMAScript 2016 的变化(英译)

与 ECMAScript 6(也称为ECMAScript 2015)相比,ECMAScript 2016 是对 JavaScript 语言规范的一个小更新。 ...

1500
来自专栏nimomeng的自我进阶

OC优化指南

a) Reusing UITableViewCell:利用cellWithTableView:cellIdentifier:nibName: b)...

701
来自专栏macOS 开发学习

macOS AppKit 的事件响应简介

一个NSResponder实例对象有三个组件:事件消息(鼠标,键盘,触控板等产生的),动作消息(action message: 比如NSButton 执行tar...

786
来自专栏向治洪

深入理解React Native页面构建渲染原理

前言 React Native 是最近非常火的一个话题,因为它的语法简介,跨平台等特性,赢得了各大平台的青睐,虽然前期是有一些坑。 基本概念解释 React 是...

27210
来自专栏王磊的博客

Spring Boot 最佳实践(三)模板引擎FreeMarker集成

FreeMarker是一款免费的Java模板引擎,是一种基于模板和数据生成文本(HMLT、电子邮件、配置文件、源代码等)的工具,它不是面向最终用户的,而是一款程...

1114

扫码关注云+社区