vuex的介绍、安装和基本使用

最新推荐文章于 2024-06-02 08:18:50 发布

webchang

最新推荐文章于 2024-06-02 08:18:50 发布

阅读量374

点赞数 3

分类专栏： vue 文章标签： vue vuex 前端 vue-cli

本文链接：https://blog.csdn.net/weixin_43974265/article/details/112858805

版权

vuex的介绍、安装和基本使用，代码演示和讲解

摘要由CSDN通过智能技术生成

一、Vuex介绍

1、单界面的状态管理

我们先看一段简单的代码

<template>
  <div id="app">
    <h2>{
  {counter}}</h2>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </div>
</template>

<script>
  export default {
    
    name: 'App',
    data() {
    
      return {
    
        counter: 0
      }
    },
    methods: {
    
      increment() {
    
        this.counter++;
      },
      decrement() {
    
        this.counter--;
      }
    }
  }
</script>

<style></style>

我们看一下上边的代码，有没有状态需要管理呢？有，就是变量counter。

counter需要某种方式被记录下来，也就是我们的State。
counter目前的值需要被显示在界面中，也就是我们的View部分。
界面发生某些操作时（我们这里是按钮的点击，也可以是用户的input），需要去更新状态，也就是Actions

vuex官网上给了一幅图来解释 State、View、Actions的关系
在这里插入图片描述
Vue已经帮我们做好了单个界面的状态管理（状态只在一个组件中使用），就像上边展示的那样。

如果有一些状态(状态a/状态b/状态c)，多个组件想要共同维护，应该怎么办呢？

多个试图都依赖同一个状态（一个状态改了，多个界面需要进行更新）
不同界面的Actions都想修改同一个状态（Home.vue需要修改，Profile.vue也需要修改这个状态）

那么Vuex就诞生啦，Vuex就是用来解决多组件状态共享的问题的。

2、Vuex是什么

Vuex官网

官方解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

当遇到多个组件需要共享状态时，传参的方法对于多层嵌套的组件将会非常繁琐。因此，我们可以把组件的共享状态抽取出来，以一个全局单例模式进行管理。在这种模式下，任何组件都能获取状态或者触发行为！

我们也可以简单的将其看成把需要多个组件共享的变量全部存储在一个对象里面。然后，将这个对象放在顶层的Vue实例中，那么多个组件就可以共享这个对象中的所有变量属性了。

如果是这样的话，为什么官方还要专门出一个插件Vuex呢？难道我们不能自己封装一个对象来管理吗？就像下面的代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>test</title>
</head>
<body>

<div id="app">
  <cpn></cpn>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

  //由于所有的组件对象都是 Vue的实例，所以我们可以在 Vue.prototype上定义需要共享的变量
  Vue.prototype.shareObj = {
    
    name: 'webchang',
    age: 18
  }

  //创建一个组件
  Vue.component('cpn', {
    
    template: '<div>我是cpn组件</div>',
    created() {
    
      console.log(this);
      console.log(this.shareObj);//试图访问共享变量 shareObj
    }
  })
  
  let vm = new Vue({
    
    el: "#app",
    data: {
    }
  });
</script>

</body>
</html>

结果发现我们可以访问到shareObj变量
在这里插入图片描述
我们再看一下打印的cpn组件的this（当前组件实例），看看它的原型链，如图所示：

看起来好像还不错~ 但是我们要先想想Vue带给我们最大的便利是什么呢？就是响应式。上边的代码是不能保证响应式的。那如果再封装实现一个对象保证它里面所有的属性做到响应式不就行了吗？当然也可以，只是自己封装可能稍微麻烦一些。Vuex就是一个现成的工具，在多个组件间共享状态的插件。