Vue2向Vue3过度Vuex状态管理工具快速入门

阳光穿透心脏的1/2处 2024-03-24 21:51 65阅读 0赞

#### 目录 ####

*   *  1 Vuex概述
     *   *  1.是什么
         *  2.使用场景
         *  3.优势
         *  4.注意：
     *  2 需求: 多组件共享数据
     *   *  1.创建项目
         *  2.创建三个组件, 目录如下
         *  3.源代码如下
     *  3 vuex 的使用 - 创建仓库
     *   *  1.安装 vuex
         *  2.新建 \`store/index.js\` 专门存放 vuex
         *  3.创建仓库 \`store/index.js\`
         *  4 在 main.js 中导入挂载到 Vue 实例上
         *  5.测试打印Vuex

--------------------

### 1 Vuex概述 ###

![在这里插入图片描述][c1996f98263f4d86ac60cc9174effe96.png]

目标：明确[Vuex][]是什么，应用场景以及优势

#### 1.是什么 ####

Vuex 是一个 Vue 的 状态管理工具，状态就是数据。

大白话：Vuex 是一个插件，可以帮我们管理 Vue 通用的数据 (多组件共享的数据)。例如：购物车数据 个人信息数

#### 2.使用场景 ####

*  某个状态 在 很多个组件 来使用 (个人信息)
 *  多个组件 共同维护 一份数据 (购物车)

![在这里插入图片描述][955692a914464c3b9acb9fda43130e48.png]

#### 3.优势 ####

*  共同维护一份数据，**数据集中化管理**
 *  **响应式变化**
 *  操作简洁 (vuex提供了一些辅助函数)

![在这里插入图片描述][981525bcb18a4629b2456d58ee70bc44.png]

#### 4.注意： ####

官方原文：

*  不是所有的场景都适用于vuex，只有在必要的时候才使用vuex
 *  使用了vuex之后，会附加更多的框架中的概念进来，增加了项目的复杂度 （数据的操作更便捷，数据的流动更清晰）

Vuex就像《近视眼镜》, 你自然会知道什么时候需要用它~

### 2 需求: 多组件共享数据 ###

目标：基于脚手架创建项目，构建 vuex 多组件数据共享环境

![在这里插入图片描述][78609151e56148b880f039aaa9a91dfd.png]

效果是三个组件共享一份数据:

*  任意一个组件都可以修改数据
 *  三个组件的数据是同步的

#### 1.创建项目 ####

vue create vuex-demo

#### 2.创建三个组件, 目录如下 ####

|-components
    |--Son1.vue
    |--Son2.vue
    |-App.vue

#### 3.源代码如下 ####

`App.vue`在入口组件中引入 Son1 和 Son2 这两个子组件

<template>
      <div id="app">
        <h1>根组件</h1>
        <input type="text">
        <Son1></Son1>
        <hr>
        <Son2></Son2>
      </div>
    </template>
    
    <script>
    import Son1 from './components/Son1.vue'
    import Son2 from './components/Son2.vue'
    
    export default {
          
      name: 'app',
      data: function () {
          
        return {
          
    
        }
      },
      components: {
          
        Son1,
        Son2
      }
    }
    </script>
    
    <style>
    #app {
          
      width: 600px;
      margin: 20px auto;
      border: 3px solid #ccc;
      border-radius: 3px;
      padding: 10px;
    }
    </style>

`main.js`

import Vue from 'vue'
    import App from './App.vue'
    
    Vue.config.productionTip = false
    
    new Vue({
        
      render: h => h(App)
    }).$mount('#app')

`Son1.vue`

<template>
      <div class="box">
        <h2>Son1 子组件</h2>
        从vuex中获取的值: <label></label>
        <br>
        <button>值 + 1</button>
      </div>
    </template>
    
    <script>
    export default {
          
      name: 'Son1Com'
    }
    </script>
    
    <style lang="css" scoped>
    .box{
          
      border: 3px solid #ccc;
      width: 400px;
      padding: 10px;
      margin: 20px;
    }
    h2 {
          
      margin-top: 10px;
    }
    </style>

`Son2.vue`

<template>
      <div class="box">
        <h2>Son2 子组件</h2>
        从vuex中获取的值:<label></label>
        <br />
        <button>值 - 1</button>
      </div>
    </template>
    
    <script>
    export default {
          
      name: 'Son2Com'
    }
    </script>
    
    <style lang="css" scoped>
    .box {
          
      border: 3px solid #ccc;
      width: 400px;
      padding: 10px;
      margin: 20px;
    }
    h2 {
          
      margin-top: 10px;
    }
    </style>

### 3 vuex 的使用 - 创建仓库 ###

![在这里插入图片描述][9b9f7db8050444d9bb29f644f3dc9e38.png]

#### 1.安装 vuex ####

安装vuex与vue-router类似，vuex是一个独立存在的插件，如果脚手架初始化没有选 vuex，就需要额外安装。

yarn add vuex@3 或者 npm i vuex@3

#### 2.新建 `store/index.js` 专门存放 vuex ####

为了维护项目目录的整洁，在src目录下新建一个store目录其下放置一个index.js文件。 (和 `router/index.js` 类似)

![在这里插入图片描述][f3595b332e0c409ca87ae78cde9da523.png]

#### 3.创建仓库 `store/index.js` ####

// 导入 vue
    import Vue from 'vue'
    // 导入 vuex
    import Vuex from 'vuex'
    // vuex也是vue的插件, 需要use一下, 进行插件的安装初始化
    Vue.use(Vuex)
    
    // 创建仓库 store
    const store = new Vuex.Store()
    
    // 导出仓库
    export default store

#### 4 在 main.js 中导入挂载到 Vue 实例上 ####

import Vue from 'vue'
    import App from './App.vue'
    import store from './store'
    
    Vue.config.productionTip = false
    
    new Vue({
        
      render: h => h(App),
      store
    }).$mount('#app')

此刻起, 就成功创建了一个 **空仓库!!**

#### 5.测试打印Vuex ####

App.vue

created(){
        
      console.log(this.$store)
    }

[c1996f98263f4d86ac60cc9174effe96.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/fa872bd5ffec48cc8c0191c87e7da759.png
[Vuex]: https://vuex.vuejs.org/zh/
[955692a914464c3b9acb9fda43130e48.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/8c9670a3ce7c47e89dc7665212f800d8.png
[981525bcb18a4629b2456d58ee70bc44.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/795b5f2e79db4c469c80468ffe586b6e.png
[78609151e56148b880f039aaa9a91dfd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/888e774a2cd9450f9cce20a2f43fc629.png
[9b9f7db8050444d9bb29f644f3dc9e38.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/afa45ee157214620b4a2761c17dbb634.png
[f3595b332e0c409ca87ae78cde9da523.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/e2b8d4cc56a443e08e21bf2040d87400.png