说说如何使用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 相关文章推荐
定义select的边框颜色
Apr 28 Javascript
JavaScript 动态添加表格行 使用模板、标记
Oct 24 Javascript
javascript权威指南 学习笔记之null和undefined
Sep 25 Javascript
推荐40个非常优秀的jQuery插件和教程【系列三】
Nov 09 Javascript
js判断上传文件的类型和大小示例代码
Oct 18 Javascript
jQuery基于ajax实现星星评论代码
Aug 07 Javascript
AngularJS之页面跳转Route实例代码
Mar 10 Javascript
Angularjs 1.3 中的$parse实例代码
Sep 14 Javascript
javascript 开发之网页兼容各种浏览器
Sep 28 Javascript
小程序ios音频播放没声音问题的解决
Jul 11 Javascript
echarts实现词云自定义形状的示例代码
Feb 20 Javascript
Jquery ajax书写方法代码实例解析
Jun 12 jQuery
基于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面向对象全攻略 (五) 封装性
2009/09/30 PHP
destoon实现VIP排名一直在前面排序的方法
2014/08/21 PHP
PHP实现链式操作的核心思想
2015/06/23 PHP
CI框架常用函数封装实例
2016/11/21 PHP
我也种棵OO树JXTree[js+css+xml]
2007/04/02 Javascript
IE浏览器兼容Firefox的JS脚本的代码
2008/10/23 Javascript
javascript写的一个链表实现代码
2009/10/25 Javascript
基于Jquery的仿照flash放大图片效果代码
2011/03/16 Javascript
自己动手制作jquery插件之自动添加删除行的实现
2011/10/13 Javascript
利用json获取字符出现次数的代码
2012/03/22 Javascript
简单的代码实现jquery定时器
2013/11/17 Javascript
JS和函数式语言的三特性
2014/03/05 Javascript
javascript实时获取鼠标坐标值并显示的方法
2015/04/30 Javascript
JavaScript实现的SHA-1加密算法完整实例
2016/02/02 Javascript
Javascript使用uploadify来实现多文件上传
2016/11/16 Javascript
angular.js4使用 RxJS 处理多个 Http 请求
2017/09/23 Javascript
JS中Map和ForEach的区别
2018/02/05 Javascript
vue 需求 data中的数据之间的调用操作
2020/08/05 Javascript
JSONObject与JSONArray使用方法解析
2020/09/28 Javascript
关于JavaScript中异步/等待的用法与理解
2020/11/18 Javascript
[03:11]TI9战队档案 - Alliance
2019/08/20 DOTA
[01:22:29]真视界:2019年国际邀请赛总决赛
2020/01/29 DOTA
Python的另外几种语言实现
2015/01/29 Python
浅析python继承与多重继承
2018/09/13 Python
Python List cmp()知识点总结
2019/02/18 Python
python递归法实现简易连连看小游戏
2020/03/25 Python
python+selenium 点击单选框-radio的实现方法
2019/09/03 Python
初次部署django+gunicorn+nginx的方法步骤
2019/09/11 Python
40个你可能不知道的Python技巧附代码
2020/01/29 Python
五年级音乐教学反思
2014/02/06 职场文书
团队精神的演讲稿
2014/05/14 职场文书
大学新闻系应届生求职信
2014/06/02 职场文书
镇党委书记群众路线整改措施思想汇报
2014/10/13 职场文书
海南召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
2015年爱国卫生工作总结
2015/04/22 职场文书
《自己去吧》教学反思
2016/02/16 职场文书