说说如何使用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 相关文章推荐
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
Apr 20 Javascript
JScript中使用ADODB.Stream判断文件编码的代码
Jun 09 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
Dec 13 Javascript
使用text方法获取Html元素文本信息示例
Sep 01 Javascript
实例讲解jquery与json的结合
Jan 07 Javascript
JavaScript小技巧整理篇(非常全)
Jan 26 Javascript
JS正则替换去空格的方法
Mar 24 Javascript
浅谈React组件之性能优化
Mar 02 Javascript
vue实现城市列表选择功能
Jul 16 Javascript
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 jQuery
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
Jun 02 Javascript
Vue结合路由配置递归实现菜单栏功能
Jun 16 Javascript
基于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
php feof用来识别文件末尾字符的方法
2010/08/01 PHP
PHP daddslashes 使用方法介绍
2012/10/26 PHP
php function用法如何递归及return和echo区别
2014/03/07 PHP
关于php中一些字符串总结
2016/05/05 PHP
JavaScript简单获取系统当前时间完整示例
2016/08/02 Javascript
JavaScript函数柯里化原理与用法分析
2017/03/31 Javascript
ES6入门教程之Class和Module详解
2017/05/17 Javascript
jQuery 1.9版本以上的浏览器判断方法代码分享
2017/08/28 jQuery
在小程序中使用canvas的方法示例
2018/09/17 Javascript
微信小程序实现富文本图片宽度自适应的方法
2019/01/20 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
2019/10/31 Javascript
简单了解常用的JavaScript 库
2020/07/16 Javascript
vue-router为激活的路由设置样式操作
2020/07/18 Javascript
[44:51]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第二场
2018/04/05 DOTA
python使用xauth方式登录饭否网然后发消息
2014/04/11 Python
Python最长公共子串算法实例
2015/03/07 Python
Linux 发邮件磁盘空间监控(python)
2016/04/23 Python
Python中查看文件名和文件路径
2017/03/31 Python
查看python安装路径及pip安装的包列表及路径
2019/04/03 Python
Python中注释(多行注释和单行注释)的用法实例
2019/08/28 Python
Django模板之基本的 for 循环 和 List内容的显示方式
2020/03/31 Python
Python3批量创建Crowd用户并分配组
2020/05/20 Python
python中字典增加和删除使用方法
2020/09/30 Python
html标签之Object和EMBED标签详解
2013/07/04 HTML / CSS
HTML5的postMessage的使用手册
2018/12/19 HTML / CSS
.NET现在共支持多少种语言
2014/02/26 面试题
轻金属冶金专业毕业生自荐信
2013/11/02 职场文书
简单而又朴实的个人求职信分享
2013/12/12 职场文书
预备党员2014全国两会学习心得体会
2014/03/10 职场文书
教师自我剖析材料
2014/09/29 职场文书
高考学习决心书
2015/02/04 职场文书
地心历险记观后感
2015/06/15 职场文书
孙振耀退休感言
2015/08/01 职场文书
详解MySQL InnoDB存储引擎的内存管理
2021/04/08 MySQL
Python如何配置环境变量详解
2021/05/18 Python
python数字类型和占位符详情
2022/03/13 Python