Vuex详细教程

素颜马尾好姑娘i 2022-11-27 15:47 336阅读 0赞

### 文章目录 ###

*  Vuex详细教程
 *   *  1.Vuex概述
     *  2.Vuex安装
     *   *  2.x版本
         *  3.x版本
     *  3.Vuex特性与案例
     *   *  项目预览
         *  基础组件编写
         *  Vuex核心特性
         *   *  State
             *  Mutation
             *  Action
             *  Getter
     *  4.小结
     *  完整代码

# Vuex详细教程 #

## 1.Vuex概述 ##

Vuex 是一个专为 Vue.js 应用程序开发的状态管理工具，集中式存储管理应用的所有组件的状态。Vuex可以实现组件全局状态（数据）管理，能够方便地实现组件之间的数据共享。

使用Vuex管理数据的好处：  
A.能够在vuex中集中管理共享的数据，便于开发和后期进行维护  
B.能够高效的实现组件之间的数据共享，提高开发效率  
C.存储在vuex中的数据是响应式的，当数据发生改变时，页面中的数据也会同步更新

## 2.Vuex安装 ##

### 2.x版本 ###

在VUE脚手架中安装vuex

npm install vuex --save

使用vue脚手架创建项目

vue init webpack hellovuex

生成好项目后，在main.js同级目录新建store.js，并导入vuex

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pwY2FuZHpoag_size_16_color_FFFFFF_t_70_pic_center]

store.js中new 一个Store对象，并且将其暴露出去:

import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({ 
      state: { 
      },
      mutations: { 
      },
      actions: { 
      },
      getters: { 
      }
    })

在main.js中将store挂载到Vue实例

import App from './App'
    import Vue from 'vue'
    import store from './store'
    
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({ 
      el: '#app',
      store,
      components: {  App },
      template: '<App/>'
    })

如果没有安装vuex就引用，会报错：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pwY2FuZHpoag_size_16_color_FFFFFF_t_70_pic_center 1]

### 3.x版本 ###

如果读者使用的是vue3.x，则可以使用vue ui命令启动图形界面，通过Vue 项目管理器创建vuex项目。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pwY2FuZHpoag_size_16_color_FFFFFF_t_70_pic_center 2]

选择手动配置：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pwY2FuZHpoag_size_16_color_FFFFFF_t_70_pic_center 3]

勾选vuex选项：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pwY2FuZHpoag_size_16_color_FFFFFF_t_70_pic_center 4]

创建项目：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pwY2FuZHpoag_size_16_color_FFFFFF_t_70_pic_center 5]

在IDEA中导入生成好的项目。可见使用图形界面生成的项目自带生成好的vuex配置：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pwY2FuZHpoag_size_16_color_FFFFFF_t_70_pic_center 6]

vue3.0用户需要通过vue ui命令管理应用，包括应用启动停止。

笔者还是习惯vue2.0的使用方式，即命令行操作，npm start即可启动应用。

## 3.Vuex特性与案例 ##

本文通过实现一个计数器案例，带领大家掌握vuex的特性及使用方法。

### 项目预览 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pwY2FuZHpoag_size_16_color_FFFFFF_t_70_pic_center 7]

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

### 基础组件编写 ###

Addition加法组件

<template>
      <div>
        <h2>当前计数器值为：{
       {count}}</h2>
        <button>+</button>
      </div>
    </template>
    
    <script> export default { data() { return { count: 0}; } }; </script>

Subtraction减法组件

<template>
      <div>
        <h2>当前计数器值为：{
       {count}}</h2>
        <button>-</button>
      </div>
    </template>
    
    <script> export default { data() { return { count: 0}; } }; </script>

在App.vue中导入子组件

<template>
      <div id="app">
        <my-addition></my-addition>
        <hr>
        <my-subtraction></my-subtraction>
      </div>
    </template>
    
    <script> import Addition from "./components/Addition"; import Subtraction from "./components/Subtraction"; export default { name: 'App', data() { return { } }, components: { 'my-addition': Addition, 'my-subtraction': Subtraction } } </script>
    
    <style> </style>

### Vuex核心特性 ###

#### State ####

State提供唯一的公共数据源，所有共享的数据都要统一放到Store中的State中存储。

在store.js文件的Store实例中可以添加我们要共享的数据，例如count值。

state: {
      count: 0
    }

组件访问State的数据

*  方式一：通过this.$store.state.变量名的方式可以直接访问

<template>
      <div>
        <h2>当前计数器值为：{
       {this.$store.state.count}}</h2>
        <button>+</button>
      </div>
    </template>
    
    <script> export default { data() { return { }; } }; </script>

*  方式二：从vuex中导入mapState函数，将全局数据映射为当前组件的计算属性

<template>
      <div>
        <h2>当前计数器值为：{
       {count}}</h2>
        <button>-</button>
      </div>
    </template>
    
    <script> import { mapState} from 'vuex' export default { data() { return { }; }, computed:{ ...mapState(['count']) } }; </script>

#### Mutation ####

Mutation用于修改变更 s t o r e 中 的 数 据 。 比 如 我 们 点 击 + 按 钮 计 数 值 增 加 ， 点 击 − 按 钮 计 数 值 减 少 。 不 能 直 接 在 组 件 中 改 变 数 据 ， 必 须 通 过 store中的数据。比如我们点击+按钮计数值增加，点击-按钮计数值减少。不能直接在组件中改变数据，必须通过 store中的数据。比如我们点击\+按钮计数值增加，点击−按钮计数值减少。不能直接在组件中改变数据，必须通过store.commit方式修改。commit的作用就是调用某个mutation函数。

mutations使用方式一：

在store.js文件的mutations中添加add方法

mutations: { 
      add(state, num) { 
        //第一个形参永远都是state也就是$state对象
        //第二个形参是调用add时传递的参数
        state.count += num;
      }
    }

在Addition.vue中给按钮添加事件

<template>
      <div>
        <h2>当前计数器值为：{
       {this.$store.state.count}}</h2>
        <button @click="add">+</button>
      </div>
    </template>
    
    <script> export default { data() { return { }; }, methods:{ add(){ //使用commit函数调用mutations中的对应函数， //第一个参数就是我们要调用的mutations中的函数名 //第二个参数就是传递给add函数的参数 this.$store.commit('add',2) } } }; </script>

mutations使用方式二：

从vuex中导入mapMutations函数，并将需要的mutations函数映射为当前组件的方法

import {  mapMutations } from 'vuex'
         
     methods:{ 
      	...mapMutations(['add'])
     }

在store.js中增加sub方法，使用第二种方式在组件中使用

subtraction.vue

从vuex中导入mapMutations函数，并将sub函数映射为当前组件的方法

<template>
      <div>
        <h2>当前计数器值为：{
       {count}}</h2>
        <button @click="subNum">-</button>
      </div>
    </template>
    
    <script> import { mapState, mapMutations} from 'vuex' export default { data() { return { }; }, methods:{ //获得mapMutations映射的sub函数 ...mapMutations(['sub']), //当点击按钮时触发subNum函数 subNum(){ //调用sub函数完成对数据的操作 this.sub(2); } }, computed: { ...mapState(['count']) } }; </script>

#### Action ####

在mutations中不能编写异步的代码，会导致vue调试器的显示出错。在vuex中我们可以使用Action来执行异步操作。Action会使用Mutation协助操作共享数据。

使用Action的方式一：

在store.js文件中编写actions方法addAsync

actions: { 
      addAsync(context, step) { 
        setTimeout(() => { 
          context.commit('add', step);
        }, 2000)
      }
    }

在Addition.vue组件中使用，使用dispatch的方式调用actions方法

<button @click="addNumAsync">+Async</button>

methods:{ 
      addNum(){ 
        //使用commit函数调用mutations中的对应函数，
        //第一个参数就是我们要调用的mutations中的函数名
        //第二个参数就是传递给add函数的参数
        this.$store.commit('add',2)
      },
      addNumAsync(){ 
        this.$store.dispatch('addAsync',5)
      }
    }

使用Action的方式二：

在store.js文件中编写actions方法subAsync

actions: { 
      addAsync(context, step) { 
        setTimeout(() => { 
          context.commit('add', step);
        }, 2000)
      },
      subAsync(context, step) { 
        setTimeout(() => { 
          context.commit('sub', step);
        }, 2000)
      }
    }

在Subtraction.vue组件中使用，使用引入mapActions 的方式调用actions方法

<template>
      <div>
        <h2>当前计数器值为：{
       {count}}</h2>
        <button @click="subNum">-</button>
        <button @click="asyncSubNum">-Async</button>
    
      </div>
    </template>
    
    <script> import { mapActions, mapMutations, mapState} from 'vuex' export default { data() { return { }; }, methods: { //获得mapMutations映射的sub函数 ...mapMutations(['sub']), //当点击按钮时触发subNum函数 subNum() { //调用sub函数完成对数据的操作 this.sub(2); }, //获得mapActions映射的subAsync函数 ...mapActions(['subAsync']), asyncSubNum() { this.subAsync(5); } }, computed: { ...mapState(['count']) } }; </script>

#### Getter ####

Getter用于对Store中的数据进行加工处理形成新的数据，它只会包装Store中保存的数据，并不会修改Store中保存的数据，当Store中的数据发生变化时，Getter生成的内容也会随之变化，是响应式的。

*  Getter使用方式一：this.$store.getters.名称

在store.js中编写getter方法

getters: { 
      showNum(state) { 
        return 'Getter 当前计数器的值为：【' + state.count + '】'
      }
    }

在Addition.vue组件中使用

<h2>{
       {this.$store.getters.showNum}}</h2>

*  Getter使用方式二：从vuex中导入mapGetters函数，映射到组件的计算属性中

在Subtraction.vue中导入

import { mapState, mapActions, mapMutations, mapGetters} from 'vuex'

computed: { 
          ...mapState(['count']),
          ...mapGetters(['showNum'])
        }

在Subtraction.vue中使用

<h2>{
       {showNum}}</h2>

运行效果:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pwY2FuZHpoag_size_16_color_FFFFFF_t_70_pic_center 8]

## 4.小结 ##

记住Vuex中四大特性：State、Mutation、Action、Getter

*  我们需要在组件中访问state中保存的数据时，我们可以编写代码this.$store.state.全局数据名称来访问保存的数据。
 *  当我们需要在组件中修改state中保存的数据时，不能直接使用state进行修改，而是必须通过mutations提供的方法来进行修改，通过this.$store.commit(‘方法名’,参数)的方式调用方法。
 *  当我们需要进行异步操作时，需要通过actions提供的方法进行异步操作，并在方法内部调用mutations提供的方法来进行修改。
 *  当我们需要展示某些数据时，我们可以使用getters来提供的对应的方法返回需要的数据。

## 完整代码 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pwY2FuZHpoag_size_16_color_FFFFFF_t_70_pic_center 9]

App.vue

<template>
      <div id="app">
        <my-addition></my-addition>
        <hr>
        <my-subtraction></my-subtraction>
      </div>
    </template>
    
    <script>
    
      import Addition from "./components/Addition";
      import Subtraction from "./components/Subtraction";
    
      export default { 
        name: 'App',
        data() { 
          return { }
        },
        components: { 
          'my-addition': Addition,
          'my-subtraction': Subtraction
        }
      }
    </script>
    
    <style>
    
    </style>

main.js

// The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import App from './App'
    import Vue from 'vue'
    import store from './store'
    
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({ 
      el: '#app',
      store,
      components: { App},
      template: '<App/>'
    })

store.js

import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({ 
      state: { 
        count: 10
      },
      mutations: { 
        add(state, num) { 
          //第一个形参永远都是state也就是$state对象
          //第二个形参是调用add时传递的参数
          state.count += num;
        },
        sub(state, num) { 
          //第一个形参永远都是state也就是$state对象
          //第二个形参是调用add时传递的参数
          state.count -= num;
        }
      },
      actions: { 
        addAsync(context, step) { 
          setTimeout(() => { 
            context.commit('add', step);
          }, 2000)
        },
        subAsync(context, step) { 
          setTimeout(() => { 
            context.commit('sub', step);
          }, 2000)
        }
      },
      getters: { 
        showNum(state) { 
          return 'Getter 当前计数器的值为：【' + state.count + '】'
        }
      }
    })

Addition.vue

<template>
      <div>
        <h2>当前计数器值为：{ { this.$store.state.count}}</h2>
        <h2>{ { this.$store.getters.showNum}}</h2>
        <button @click="addNum">+</button>
        <button @click="addNumAsync">+Async</button>
      </div>
    </template>
    
    <script>
      export default { 
        data() { 
          return { };
        },
        methods:{ 
          addNum(){ 
            //使用commit函数调用mutations中的对应函数，
            //第一个参数就是我们要调用的mutations中的函数名
            //第二个参数就是传递给add函数的参数
            this.$store.commit('add',2)
          },
          addNumAsync(){ 
            this.$store.dispatch('addAsync',5)
          }
        }
      };
    </script>

Subtraction.vue

<template>
      <div>
        <h2>当前计数器值为：{ { count}}</h2>
        <h2>{ { showNum}}</h2>
        <button @click="subNum">-</button>
        <button @click="asyncSubNum">-Async</button>
    
      </div>
    </template>
    
    <script>
      import { mapState, mapActions, mapMutations, mapGetters} from 'vuex'
    
      export default { 
        data() { 
          return { };
        },
        methods: { 
          //获得mapMutations映射的sub函数
          ...mapMutations(['sub']),
          //当点击按钮时触发subNum函数
          subNum() { 
            //调用sub函数完成对数据的操作
            this.sub(2);
          },
          //获得mapActions映射的subAsync函数
          ...mapActions(['subAsync']),
          asyncSubNum() { 
            this.subAsync(5);
          }
    
        },
        computed: { 
          ...mapState(['count']),
          ...mapGetters(['showNum'])
        }
      };
    </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pwY2FuZHpoag_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/57c84c9718cf4e088b6272c71cfc080b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pwY2FuZHpoag_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221124/31f21af0fc5c4e9ba220a01f116d15fe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pwY2FuZHpoag_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221124/65e05e2b6983454d89600e338f25dbc9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pwY2FuZHpoag_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221124/447e95f92f1e4cf092ea9cb68d5e602c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pwY2FuZHpoag_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221124/9f8a91b791384b158cbcbde936ae6921.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pwY2FuZHpoag_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221124/8927eee856a2428d86e1c093c6c44d61.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pwY2FuZHpoag_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221124/f223342f55e04675b046e9b098812620.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pwY2FuZHpoag_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221124/6d8a9b5fe35f4776b48c36d49d30c026.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pwY2FuZHpoag_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221124/d8aec0e3e4f4436580ac95155dae5140.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pwY2FuZHpoag_size_16_color_FFFFFF_t_70_pic_center 9]: /images/20221124/a65bbb589cfe4438a1e46cb3e2f9ee28.png