vue3.2中的vuex使用详解

yizhihongxing

下面是关于vue3.2中的vuex使用详解的完整攻略。

1. 什么是Vuex

Vuex是Vue.js应用程序的状态管理模式。它通过一个集中的存储管理所有组件的状态,并以相应的规则保证状态以可预测的方式发生变化。

2. 如何使用Vuex

2.1 安装Vuex

在vue项目中使用Vuex,需要先安装Vuex。使用npm安装:

npm install vuex --save

2.2 Vue中使用Vuex

在Vue项目中,需要先引入Vuex,并将其挂载到Vue中。

import {createStore} from 'vuex'
import Vue from 'vue'

Vue.use(Vuex)

const store = createStore({
  state: {...},
  mutations: {...},
  actions: {...},
  getters: {...}
})

export default store

其中,state表示存储的状态值,mutations表示提交对状态的更改,actions表示异步操作,getters表示从state中派生出一些状态。

2.3 在组件中使用Vuex

在组件中使用Vuex,需要使用Vue提供的mapStatemapMutationsmapActionsmapGetters四个辅助函数进行状态管理。

2.3.1 mapState使用示例

mapState函数可以直接将Vuex的state映射到组件的计算属性中。

import {mapState} from 'vuex'

export default {
  // ...
  computed: {
    ...mapState({
      count: state => state.count
    })
  }
}

2.3.2 mapMutations使用示例

mapMutations函数可以将Vuex的mutations映射到组件的methods中。

import {mapMutations} from 'vuex'

export default {
  // ...
  methods: {
    ...mapMutations([
      'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
      'decrement' // 将 `this.decrement()` 映射为 `this.$store.commit('decrement')`
    ])
  }
}

2.3.3 mapActions使用示例

mapActions函数可以将Vuex的actions映射到组件的methods中。

import {mapActions} from 'vuex'

export default {
  // ...
  methods: {
    ...mapActions([
      'incrementAsync', // 将 `this.incrementAsync()` 映射为 `this.$store.dispatch('incrementAsync')`
      'decrementAsync' // 将 `this.decrementAsync()` 映射为 `this.$store.dispatch('decrementAsync')`
    ])
  }
}

2.3.4 mapGetters使用示例

mapGetters函数可以将Vuex的getters映射到组件的计算属性中。

import {mapGetters} from 'vuex'

export default {
  // ...
  computed: {
    ...mapGetters([
      'doneTodosCount'
    ])
  }
}

3. 示例说明

3.1 示例一

下面是一个简单的示例,说明如何在Vuex中管理计数器的状态。

安装Vuex

使用npm安装Vuex:

npm install vuex

在Vue项目中使用Vuex

在Vue项目中,需要先引入Vuex,并将其挂载到Vue中。

import {createStore} from 'vuex'
import Vue from 'vue'

Vue.use(Vuex)

const store = createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    },
    decrement(state) {
      state.count--
    }
  },
  actions: {
    incrementAsync({commit}) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    },
    decrementAsync({commit}) {
      setTimeout(() => {
        commit('decrement')
      }, 1000)
    }
  },
  getters: {
    doneTodosCount: state => {
      return state.count
    }
  }
})

export default store

在组件中使用Vuex

在组件中使用Vuex,需要使用Vue提供的mapStatemapMutationsmapActionsmapGetters四个辅助函数进行状态管理。

<template>
  <div>
    <span>{{count}}</span>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </div>
</template>

<script>
import {mapState, mapMutations, mapActions, mapGetters} from 'vuex'

export default {
  computed: {
    ...mapState({
      count: state => state.count
    }),
    ...mapGetters([
      'doneTodosCount'
    ])
  },
  methods: {
    ...mapMutations([
      'increment',
      'decrement'
    ]),
    ...mapActions([
      'incrementAsync',
      'decrementAsync'
    ])
  }
}
</script>

3.2 示例二

下面是另一个示例,说明如何在Vuex中管理购物车的状态。

安装Vuex

使用npm安装Vuex:

npm install vuex

在Vue项目中使用Vuex

在Vue项目中,需要先引入Vuex,并将其挂载到Vue中。

import {createStore} from 'vuex'
import Vue from 'vue'

Vue.use(Vuex)

const store = createStore({
  state: {
    cart: []
  },
  mutations: {
    addToCart(state, product) {
      const item = state.cart.find(i => i.id === product.id)
      if (item) {
        item.quantity++
      } else {
        state.cart.push({...product, quantity: 1})
      }
    }
  },
  actions: {},
  getters: {
    cartCount: state => {
      return state.cart.reduce((count, item) => count + item.quantity, 0)
    }
  }
})

export default store

在组件中使用Vuex

在组件中使用Vuex,需要使用Vue提供的mapStatemapMutationsmapActionsmapGetters四个辅助函数进行状态管理。

<template>
  <div>
    <h2>购物车</h2>
    <p>商品数量:{{cartCount}}</p>
    <ul>
      <li v-for="item in cart" :key="item.id">{{item.name}} * {{item.quantity}}</li>
    </ul>
    <button @click="addToCart({id: 1, name: '商品1', price: 100})">加入购物车</button>
  </div>
</template>

<script>
import {mapState, mapMutations, mapActions, mapGetters} from 'vuex'

export default {
  computed: {
    ...mapState({
      cart: state => state.cart
    }),
    ...mapGetters([
      'cartCount'
    ])
  },
  methods: {
    ...mapMutations([
      'addToCart'
    ]),
    ...mapActions([
    ])
  }
}
</script>

以上就是关于vue3.2中的vuex使用详解的完整攻略以及两个示例的详细说明。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:vue3.2中的vuex使用详解 - Python技术站

(0)
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • Vue3全局组件通信之provide / inject详解

    当我们开发Vue3应用时,有时候会需要在多个组件之间进行数据传递,这时候就需要用到全局组件通信。Vue3中提供了两种方式进行全局组件通信,一种是provide / inject,另一种是Vuex状态管理,本文主要介绍前者。 一、provide / inject说明 provide / inject是Vue3中提供的API,用于在父组件中提供数据,然后在子组件…

    Vue 2023年5月27日
    00
  • 修改vue+webpack run build的路径方法

    下面是修改vue+webpack run build的路径方法的详细攻略。 1. 理解打包路径 在修改打包路径之前,我们首先需要理解打包路径的概念。在使用vue-cli构建项目时,我们可以通过执行npm run build命令来进行打包,打包后的文件默认会被生成到dist目录下。如果我们需要修改打包后文件的输出路径,那么就需要修改webpack的配置文件。 …

    Vue 2023年5月28日
    00
  • 详解vue+axios给开发环境和生产环境配置不同的接口地址

    为了给开发环境和生产环境配置不同的接口地址,我们需要依赖于webpack。我们可以通过环境变量在编译时设置接口地址,从而在不同的环境中使用不同的接口地址。 1. 修改webpack的配置文件 在项目的根目录中找到名为vue.config.js的文件,如果不存在则通过vue-cli工具生成(vue create projectName)。在该文件中添加如下代码…

    Vue 2023年5月28日
    00
  • JS简单实现父子窗口传值功能示例【未使用iframe框架】

    下面是对“JS简单实现父子窗口传值功能示例【未使用iframe框架】”的详细攻略: 1. 基本实现原理 在父窗口中,定义一个变量保存需要传递的数据 在父窗口中,定义一个函数,该函数将需要传递的数据作为参数传递给子窗口 在子窗口中,定义一个变量保存从父窗口传递来的数据 在子窗口中,通过父窗口定义的函数来接收从父窗口传递来的数据 2. 实现过程示例 2.1 示例…

    Vue 2023年5月28日
    00
  • vue 中filter的多种用法

    下面是一份关于 Vue 中 filter 的多种用法的攻略。 简介 在 Vue 中,filter 是一种非常实用的功能,它可以让我们在模板中格式化数据。例如,在展示日期时,可以使用 Date Filter 将日期格式化为固定的格式,或者在展示价格时,可以使用 Currency Filter 将价格格式化为指定的货币单位。 Vue 中 Filter 的基本用法…

    Vue 2023年5月27日
    00
  • 一篇文章让你看懂封装Axios

    我来为你讲解。 一篇文章让你看懂封装 Axios – 完整攻略 前言 Axios 是一个基于 promise 的 HTTP 请求库,可以用于浏览器以及 Node.js 环境中。由于 Axios 功能强大,使用简单便捷,因此被广泛用作前后端交互的请求库。但是,如果每个请求都是单独的一个函数去处理的,那么代码会变得很冗长,不易维护。因此我们需要封装 Axios。…

    Vue 2023年5月28日
    00
  • JavaScript+CSS实现的可折叠二级菜单实例

    下面是“JavaScript+CSS实现的可折叠二级菜单实例”的完整攻略。 1. 实现思路 该二级菜单实例的实现思路如下: 初始状态二级菜单处于收缩状态,点击主菜单可以展开或关闭对应的二级菜单。 主菜单和二级菜单分别定义为一组HTML结构,通过CSS样式实现布局和样式。 通过JavaScript事件绑定实现主菜单点击后对应的二级菜单的展开和收缩。 2. HT…

    Vue 2023年5月28日
    00
  • vue如何给数组添加新对象并赋值

    首先,我们需要明确需要添加的对象的数据结构,例如: { "id": 1, "name": "John Doe", "email": "johndoe@example.com" } 接着,我们可以使用Vue提供的响应式方法来添加一个对象到数组中: this.us…

    Vue 2023年5月28日
    00
合作推广
合作推广
分享本页
返回顶部