说说如何使用Vuex进行状态管理(小结)


Posted in Javascript onApril 14, 2019

1 为什么需要状态管理

一个 Vue 组件分为数据(model)与视图(view)。当通过 methods 中的方法更新数据时,视图也会自动更新。

message.vue

<template>
  <div>
    {{message}}
    <button @click="changeMessage">改变内容</button>
  </div>
</template>

<script>
  export default {
    name: "message",
    data() {
      return {
        message: '你好'
      };
    },
    methods: {
      changeMessage() {
        this.message = '我很好'
      }
    }
  }
</script>

效果:

说说如何使用Vuex进行状态管理(小结)

这个示例中的 message 与 changeMessage() 只能在 message.vue 组件中使用。而在实际应用中,常见的就是跨组件共享数据的要求。这时,就可以通过 Vuex 来优雅并高效地管理组件状态啦O(∩_∩)O~

注意:Vuex 有一定的技术门槛,它主要应用于多人协同开发的大型单页面应用。所以,是否使用 Vuex 取决于团队规模与技术储备。

2 安装 Vuex

npm install --save vuex

安装版本:vuex@3.1.0

3 基本用法

 3.1 引入 Vuex

在 main.js 中引入 Vuex:

...
//引入 vuex 插件
import Vuex from 'vuex';
...

//加载 vuex 插件
Vue.use(Vuex);

//Vuex 配置
const store = new Vuex.Store({
  state: {
    ...
  },
  mutations: {
    ...
  }
});
...

new Vue({
  el: '#app',
 ...
  //使用 Vuex
  store: store,
 ...
})

Vuex 中的 store 包含应用的数据状态和操作过程。store 中的数据发生变化,使用了这些数据的组件也会立即更新。

3.2 定义数据

数据定义在 Vuex 的 states 属性中。

我们以计数器为例。定义了一个 count 数据并初始化为 0:

const store = new Vuex.Store({
  state: {
    count: 0
  }
});

3.3 读取数据

数据定义好之后,就可以在 vue 组件中通过 $store.state.count 读取出来啦,比如在 index.vue 中可以这样写:

<template>

  <div>
    ...
    {{count}}
   ...
  </div>
</template>

<script>
  export default {
    name: "index.vue",
    computed: {
      count() {
        return this.$store.state.count;
      }
    },
 
   ...
 }
</script>

这里利用计算属性,从 Vuex 的 store 中读取了计数器的当前值。

3.4 修改数据

使用 Vuex 的 mutations 属性,可以修改 state 中定义的数据。我们为计数器定义增长与减少操作:

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state, n = 1) {
      state.count += n;
    },
    decrease(state) {
      state.count--;
    }
  }
});

mutations 中的函数,可以有两个入参。第一个入参是 state,第二个入参可以是任意类型。比如这里可以为新增操作,指定增长量,如果不指定,那么增长量就默认为 1。

注意:如果需要传入多个参数,那么我们可以在此传入一个带多个参数的对象。

这里使用了 ES 6 为函数设置默认值的语法。 increment(state, n = 1) 等同于:

increment (state, n){
 n = n || 1;
}

在 *.vue 组件中,可以通过 this.$store.commit 方法来执行 mutations。我们在 index.vue 中,新增三个按钮,用于 “+1” 、“-1” 和 "+3" 操作:

<template>

  <div>
 
    {{count}}
    <button @click="handleIncrement">+1</button>
    <button @click="handleDecrease">-1</button>
    <button @click="handleIncrementMore">+3</button>
  </div>
</template>

<script>
  export default {
    ...
    methods: {
      handleIncrement() {
        this.$store.commit('increment');
      },
      handleDecrease() {
        this.$store.commit('decrease');
      },
      handleIncrementMore() {
        this.$store.commit('increment', 3);
      }
     }
   }
</script>

this.$store.commit 方法的入参,是在 mutations 中定义的函数名。

还可以通过指定 type 的方式提交, type 的值就是 mutations 中定义的函数名:

main.js

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    ...
    incrementByParam(state, params) {
      state.count += params.count;
    }
  }
});

index.vue

<template>

  <div>
    {{count}}
    ...
    <button @click="handleByParam">+30</button>
  </div>
</template>

<script>
  export default {
    ...
    methods: {
      ...
      handleByParam() {
        this.$store.commit({
          type: 'incrementByParam',
          count: 30
        });
      },
    }
  }
</script>

注意:如果在 mutations 中异步操作了数据,那么组件在 commit 提交之后,将无法立即改变数据。所以,在 mutations 中,建议尽量使用同步方法来操作数据。

效果:

说说如何使用Vuex进行状态管理(小结)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js编码、解码函数介绍及其使用示例
Sep 05 Javascript
window.onload和$(function(){})的区别介绍
Oct 30 Javascript
javascirpt实现2个iframe之间传值的方法
Jun 30 Javascript
Bootstrap CDN和本地化环境搭建
Oct 26 Javascript
Jquery Easyui菜单组件Menu使用详解(15)
Dec 18 Javascript
JavaScript实现星级评分
Jan 12 Javascript
详解angular2实现ng2-router 路由和嵌套路由
Mar 24 Javascript
vue实现动态列表点击各行换色的方法
Sep 13 Javascript
Vue源码分析之Vue实例初始化详解
Aug 25 Javascript
vue中touch和click共存的解决方式
Jul 28 Javascript
uni-app实现获取验证码倒计时功能
Nov 01 Javascript
Vue项目打包、合并及压缩优化网页响应速度
Jul 07 Vue.js
基于Vue2-Calendar改进的日历组件(含中文使用说明)
Apr 14 #Javascript
浅谈Vue页面级缓存解决方案feb-alive(上)
Apr 14 #Javascript
vue 实现小程序或商品秒杀倒计时
Apr 14 #Javascript
js中async函数结合promise的小案例浅析
Apr 14 #Javascript
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
Apr 14 #Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
Apr 13 #Javascript
JS+CSS3实现的简易钟表效果示例
Apr 13 #Javascript
You might like
echo, print, printf 和 sprintf 区别
2006/12/06 PHP
基于preg_match_all采集后数据处理的一点心得笔记(编码转换和正则匹配)
2014/01/31 PHP
PHP数组排序之sort、asort与ksort用法实例
2014/09/08 PHP
PHP简单判断iPhone、iPad、Android及PC设备的方法
2016/10/11 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
PHP异常类及异常处理操作实例详解
2018/12/19 PHP
javaScript 读取和设置文档元素的样式属性
2009/04/14 Javascript
JQuery+CSS提示框实现思路及代码(纯手工打造)
2013/05/07 Javascript
jQuery setTimeout传递字符串参数报错的解决方法
2014/06/09 Javascript
Javascript递归打印Document层次关系实例分析
2015/05/15 Javascript
使用js复制链接中的部分文字的方法
2015/07/30 Javascript
Javascript实现Array和String互转换的方法
2015/12/21 Javascript
ArtEditor富文本编辑器增加表单提交功能
2016/04/18 Javascript
jQuery手风琴的简单制作
2017/05/12 jQuery
ReactNative实现图片上传功能的示例代码
2017/07/11 Javascript
JavaScript取得gridview中获取checkbox选中的值
2017/07/24 Javascript
微信小程序页面生命周期详解
2018/01/31 Javascript
浅谈在react中如何实现扫码枪输入
2018/07/04 Javascript
vue vant Area组件使用详解
2019/12/09 Javascript
[01:02:53]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第二局
2016/03/06 DOTA
Python反射用法实例简析
2017/12/22 Python
Python+selenium实现自动循环扔QQ邮箱漂流瓶
2018/05/29 Python
Python实现截取PDF文件中的几页代码实例
2019/03/11 Python
django 实现celery动态设置周期任务执行时间
2019/11/19 Python
Python调用百度OCR实现图片文字识别的示例代码
2020/07/17 Python
python时间time模块处理大全
2020/10/25 Python
美国眼镜网站:EyeBuyDirect
2017/04/13 全球购物
土木工程个人自荐信范文
2013/11/30 职场文书
综合办公室个人的自我评价
2013/12/22 职场文书
通用求职信范文模板分享
2013/12/27 职场文书
大学毕业生通用自我评价
2014/01/05 职场文书
服务员自我评价
2014/01/25 职场文书
县长“四风”对照检查材料思想汇报
2014/10/05 职场文书
党员批评与自我批评材料
2014/10/14 职场文书
七年级上册语文教学计划
2015/01/22 职场文书
2015年社区服务活动总结
2015/03/25 职场文书