说说如何使用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 相关文章推荐
通过JAVASCRIPT读取ASP设定的COOKIE
Nov 24 Javascript
JS URL传中文参数引发的乱码问题
Sep 02 Javascript
jquery实现漂浮在网页右侧的qq在线客服插件示例
May 13 Javascript
JavaScript解析json格式数据简单示例
Dec 09 Javascript
同步异步动态引入js文件的几种方法总结
Sep 23 Javascript
Angular2学习教程之TemplateRef和ViewContainerRef详解
May 25 Javascript
Ionic2开发环境搭建教程
Aug 20 Javascript
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 jQuery
JS限制输入框输入的实现代码
Jul 02 Javascript
vue中使用protobuf的过程记录
Oct 26 Javascript
深入浅出 Vue 系列 -- 数据劫持实现原理
Apr 23 Javascript
微信小程序实现星星评分效果
Nov 01 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 字符串操作入门教程
2006/12/06 PHP
php基础知识:类与对象(3) 构造函数和析构函数
2006/12/13 PHP
PHP实现数组array转换成xml的方法
2016/07/19 PHP
php将文件夹打包成zip文件的简单实现方法
2016/10/04 PHP
Yii框架实现记录日志到自定义文件的方法
2017/05/23 PHP
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.3
2008/03/22 Javascript
js监听表单value的修改同步问题,跨浏览器支持
2009/12/31 Javascript
JavaScript游戏之优化篇
2010/11/08 Javascript
JS实现slide文字框缩放伸展效果代码
2015/11/05 Javascript
以JavaScript来实现WordPress中的二级导航菜单的方法
2015/12/14 Javascript
JavaScript:Date类型全面解析
2016/05/19 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
2016/07/28 Javascript
微信小程序 动态绑定事件并实现事件修改样式
2017/04/13 Javascript
微信小程序 action-sheet 反馈上拉菜单简单实例
2017/05/11 Javascript
微信小程序实现tab和swiper切换结合效果
2020/07/17 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
2019/09/19 Javascript
vue自定义指令实现仅支持输入数字和浮点型的示例
2019/10/30 Javascript
python自动化工具日志查询分析脚本代码实现
2013/11/26 Python
python计算程序开始到程序结束的运行时间和程序运行的CPU时间
2013/11/28 Python
Python数组定义方法
2016/04/13 Python
Python实现将文本生成二维码的方法示例
2017/07/18 Python
Python优先队列实现方法示例
2017/09/21 Python
下载与当前Chrome对应的chromedriver.exe(用于python+selenium)
2020/01/14 Python
python+django+selenium搭建简易自动化测试
2020/08/19 Python
Python基于内置函数type创建新类型
2020/10/22 Python
意大利体育用品和运动服网上商店:Maxi Sport
2019/09/14 全球购物
物业经理求职自我评价
2013/09/22 职场文书
关于母亲节的感言
2014/02/04 职场文书
预备党员入党自我评价范文
2014/03/10 职场文书
学习两会精神心得范文
2014/03/17 职场文书
公司开业庆典主持词
2014/03/21 职场文书
《莫泊桑拜师》教学反思
2014/04/23 职场文书
法人身份证明书
2014/10/08 职场文书
小学教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
2016年清明节红领巾广播稿
2015/12/17 职场文书
Python进程间的通信之语法学习
2022/04/11 Python