说说如何使用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代码[多浏览器兼容]
Jun 07 Javascript
检测jQuery.js是否已加载的判断代码
May 20 Javascript
JS二维数组的定义说明
Mar 03 Javascript
jQuery学习笔记之jQuery.fn.init()的参数分析
Jun 09 Javascript
基于jQuery实现复选框是否选中进行答题提示
Dec 10 Javascript
学习JavaScript设计模式之状态模式
Jan 08 Javascript
js创建数组的简单方法
Jul 27 Javascript
vue2.0父子组件间通信的实现方法
Apr 19 Javascript
VUE 实现滚动监听 导航栏置顶的方法
Sep 11 Javascript
使用gulp构建前端自动化的方法示例
Dec 25 Javascript
vue 点击展开显示更多(点击收起部分隐藏)
Apr 09 Javascript
解决vue项目中出现Invalid Host header的问题
Nov 17 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实现的简单中文验证码功能示例
2017/01/03 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
Yii框架常见缓存应用实例小结
2019/09/09 PHP
PHP实现简单的协程任务调度demo示例
2020/02/01 PHP
基于PHP实现生成随机水印图片
2020/12/09 PHP
document.all还是document.getElementsByName?
2006/07/21 Javascript
Java 正则表达式学习总结和一些小例子
2012/09/13 Javascript
extjs ColumnChart设置不同的颜色实现代码
2013/05/17 Javascript
JQuery调webservice实现邮箱验证(检测是否可用)
2013/05/21 Javascript
Ajax提交与传统表单提交的区别说明
2014/02/07 Javascript
javascript去掉代码里面的注释
2015/07/24 Javascript
JavaScript实现的圆形浮动标签云效果实例
2015/08/06 Javascript
jQuery基于扩展实现的倒计时效果
2016/05/14 Javascript
Vue + Webpack + Vue-loader学习教程之功能介绍篇
2017/03/14 Javascript
在vue 中使用 less的教程详解
2018/09/26 Javascript
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
2019/05/30 Javascript
Python中的异常处理简明介绍
2015/04/13 Python
Python 实现数据库(SQL)更新脚本的生成方法
2017/07/09 Python
使用Python对微信好友进行数据分析
2018/06/27 Python
情人节快乐! python绘制漂亮玫瑰
2020/08/18 Python
提升Python效率之使用循环机制代替递归函数
2019/07/23 Python
opencv转换颜色空间更改图片背景
2019/08/20 Python
python 遍历pd.Series的index和value
2019/11/26 Python
django model object序列化实例
2020/03/13 Python
PyQT5速成教程之Qt Designer介绍与入门
2020/11/02 Python
为娇小女性量身打造:Petite Studio
2018/11/01 全球购物
Araks官网:纽约内衣品牌
2020/10/15 全球购物
护理专业毕业生自我鉴定总结
2014/03/24 职场文书
美术课外活动总结
2014/07/08 职场文书
纪检干部对照检查材料
2014/08/22 职场文书
青年教师师德演讲稿
2014/08/26 职场文书
群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
观看建国大业观后感
2015/06/01 职场文书
单独二胎证明
2015/06/24 职场文书
高中诗歌鉴赏教学反思
2016/02/16 职场文书
基于Golang 高并发问题的解决方案
2021/05/08 Golang