目录
Vuex是做什么的?
状态管理是什么?
单页面的状态管理
vuex(Vue3.2版本)
多页状态管理
vuex store对象属性介绍
Vue3中获取 store 实例对象的方法
1. state
2. mutations
3. actions
4. getters
5. modules
首页 web前端 Vue.js Vue3中Vuex怎么使用

Vue3中Vuex怎么使用

May 14, 2023 pm 08:28 PM
vue3 vuex

    Vuex是做什么的?

    Vue官方:状态管理工具

    状态管理是什么?

    需要在多个组件中共享的状态、且是响应式的、一个变,全都改变。

    例如一些全局要用的的状态信息:用户登录状态、用户名称、地理位置信息、购物车中商品、等等

    这时候我们就需要这么一个工具来进行全局的状态管理,Vuex就是这样的一个工具。

    单页面的状态管理

    View–>Actions—>State

    视图层(view)触发操作(action)更改状态(state)响应回视图层(view)

    vuex(Vue3.2版本)

    store/index.js 创建store对象并导出store

    import { createStore } from 'vuex'
    
    export default createStore({
      state: {
      },
      mutations: {
      },
      actions: {
      },
      modules: {
      }
    })
    登录后复制

    main.js 引入并使用

    ...
    import store from './store'
    ...
    app.use(store)
    登录后复制

    多页状态管理

    Vue3中Vuex怎么使用

    vuex store对象属性介绍

    Vue3中获取 store 实例对象的方法

    vue2 中可以通过 this.$store.xxx 的方式拿到 store 的实例对象。

    vue3 中的 setup 在 beforecreate 和 created 前执行,此时 vue对象还未被创建,没有了之前的this,所以此处我们需要用到另一种方法来获取到 store 对象。

    import { useStore } from 'vuex' // 引入useStore 方法
    const store = useStore()  // 该方法用于返回store 实例
    console.log(store)  // store 实例对象
    登录后复制
    1. state

    存放数据的地方

    state: {
      count: 100,
      num: 10
    },
    登录后复制

    使用:使用方法大致与vue2.x中的版本相同,通过 $store.state.属性名 来获取state中的属性。

    //template中
    <span>{{$store.state.count}}</span>
    <span>{{$store.state.num}}</span>
    登录后复制

    可以在 state 中直接进行数据变化的操作,但Vue不建议这么做。因为对于vue开发工具 devtools 来说,直接在state中进行数据改变,devtools是跟踪不到的。vuex中希望通过 action(进行异步操作)或是 mutations(同步操作)来进行数据改变的操作,这样在 devtools 中才能直接观察出数据的变化以及记录,方便开发者调试。

    另外,在vue3 中对state 中对象新增属性或删除时,不再需要通过 vue.set() , 或是 vue.delete() 来进行对象的响应式处理了,直接新增的对象属性已经具有响应式。

    2. mutations

    vuex的store状态更新的唯一方式:提交 mutation

    同步操作可以直接在mutatuions中直接进行

    mutions 主要包含2部分:

    1. 字符串的事件类型 (type)

    2. 一个**回调函数(handler)**该回调函数的第一个参数是 state

    mutations: {
      // 传入 state
      increment (state) {
        state.count++
      }
    }
    登录后复制

    template 中通过 $store.commit('方法名') 触发

    在 vue3.x 中需要拿到** store 实例的话,需要调用 useStore **这样一个函数,在 vuex 中导入

    // 导入 useStore 函数
    import { useStore } from &#39;vuex&#39;
    const store = useStore()
    store.commit(&#39;increment&#39;)
    登录后复制

    mution 的参数与传参方法

    mution 接收参数直接写在定义的方法里边即可接受传递的参数

    // ...state定义count
    mutations: {
      sum (state, num) {
        state.count += num
      }
    }
    登录后复制

    通过 commit 的payload 进行参数传递

    使用 store.commit('mution中函数名', '需要传递的参数' ) 在commit里添加参数的方式进行传递

    <h3>{{this.$store.state.count}}</h3>
    <button @click="add(10)">++</button>
    ...
    <script setup>
    // 获取store实例,获取方式看上边获取store实例方法
    const add = (num) => {
      store.commit(&#39;sum&#39;, num)
    }
    </script>
    登录后复制

    mution 的提交风格

    前面提到了 mution 主要包含 type 和 回调函数 两部分, 和通过commit payload的方式进行参数传递(提交),下面我们可以

    用这种方式进行 mution 的提交

    const add = (num) => {
      store.commit({
        type: &#39;sum&#39;,  // 类型就是mution中定义的方法名称
        num
      })
    }
    
    ...
    mutations: {
      sum (state, payload) {
        state.count += payload.num
      }
    }
    登录后复制
    3. actions

    异步操作在action中进行,再传递到mutation

    action基本使用如下:

    action 中定义的方法默认参数为** context 上下文**, 可以理解为 store 对象

    通过 context 上下文对象,拿到store,通过 commit 触发 mution 中的方法,以此来完成异步操作

    ...
    mutations: {
      sum (state, num) {
        state.count += num
      }
    },
    actions: {
      // context 上下文对象,可以理解为store
      sum_actions (context, num) {
        setTimeout(() => {
          context.commit(&#39;sum&#39;, num)  // 通过context去触发mutions中的sum
        }, 1000)
      }
    },
    登录后复制

    在template 中通过dispatch 调用action 中定义的sum_action 方法

    // ...template
    store.dispatch(&#39;sum_actions&#39;, num)
    登录后复制

    通过 promise 实现异步操作完成,通知组件异步执行成功或是失败。

    // ...
    const addAction = (num) => {
      store.dispatch(&#39;sum_actions&#39;, {
        num
      }).then((res) => {
        console.log(res)
      }).catch((err) => {
        console.log(err)
      })
    }
    登录后复制

    sun_action方法返回一个promise,当累加的值大于30时不再累加,抛出错误。

     actions: {
        sum_actions (context, payload) {
          return new Promise((resolve, reject) => {
            setTimeout(() => {
              // 通过 context 上下文对象拿到 count
              if (context.state.count < 30) {
                context.commit(&#39;sum&#39;, payload.num)
                resolve(&#39;异步操作执行成功&#39;)
              } else {
                reject(new Error(&#39;异步操作执行错误&#39;))
              }
            }, 1000)
          })
        }
      },
    登录后复制
    4. getters

    类似于组件的计算属性

    import { createStore } from &#39;vuex&#39;
    
    export default createStore({
      state: {
        students: [{ name: &#39;mjy&#39;, age: &#39;18&#39;}, { name: &#39;cjy&#39;, age: &#39;22&#39;}, { name: &#39;ajy&#39;, age: &#39;21&#39;}]
      },
      getters: {
        more20stu (state) { return state.students.filter(item => item.age >= 20)}
      }
    })
    登录后复制

    使用 通过$store.getters.方法名 进行调用

    //...template
    <h3>{{$store.getters.more20stu}}</h3> // 展示出小于20岁的学生
    登录后复制

    getters 的入参, getters 可以接收两个参数,一个是 state, 一个是自身的 getters ,并对自身存在的方法进行调用。

    getters: {
      more20stu (state, getters) { return getters.more20stu.length}
    }
    登录后复制

    getters 的参数与传参方法

    上面是getters固定的两个参数,如果你想给getters传递参数,让其筛选大于 age 的人,可以这么做

    返回一个 function 该 function 接受 Age,并处理

    getters: {
      more20stu (state, getters) { return getters.more20stu.length},
      moreAgestu (state) {
          return function (Age) {
            return state.students.filter(item =>
              item.age >= Age
            )
          }
        }
      // 该写法与上边写法相同但更简洁,用到了ES6中的箭头函数,如想了解es6箭头函数的写法
      // 可以看这篇文章 https://blog.csdn.net/qq_45934504/article/details/123405813?spm=1001.2014.3001.5501
      moreAgestu_Es6: state => {
        return Age => {
          return state.students.filter(item => item.age >= Age)
        }
      }
    }
    登录后复制

    使用

    //...template
    <h3>{{$store.getters.more20stu}}</h3> // 展示出小于20岁的学生
    

    {{$store.getters.moreAgestu(18)}}

    // 通过参数传递, 展示出年龄小于18的学生
    登录后复制
    5. modules

    当应用变得复杂时,state中管理的变量变多,store对象就有可能变得相当臃肿。

    为了解决这个问题,vuex允许我们将store分割成模块化(modules),而每个模块拥有着自己的state、mutation、action、getters等

    在store文件中新建modules文件夹

    在modules中可以创建单一的模块,一个模块处理一个模块的功能

    store/modules/user.js 处理用户相关功能

    store/modules/pay.js 处理支付相关功能

    store/modules/cat.js 处理购物车相关功能

    // user.js模块
    // 导出
    export default {
      namespaced: true, // 为每个模块添加一个前缀名,保证模块命明不冲突 
      state: () => {},
      mutations: {},
      actions: {}
    }
    登录后复制

    最终通过 store/index.js 中进行引入

    // store/index.js
    import { createStore } from &#39;vuex&#39;
    import user from &#39;./modules/user.js&#39;
    import user from &#39;./modules/pay.js&#39;
    import user from &#39;./modules/cat.js&#39;
    export default createStore({
      modules: {
        user,
        pay,
        cat
      }
    })
    登录后复制

    在template中模块中的写法和无模块的写法大同小异,带上模块的名称即可

    <h3>{{$store.state.user.count}}</h3>
    登录后复制
    store.commit(&#39;user/sum&#39;, num) // 参数带上模块名称
    store.dispatch(&#39;user/sum_actions&#39;, sum)
    登录后复制

    以上是Vue3中Vuex怎么使用的详细内容。更多信息请关注PHP中文网其他相关文章!

    本站声明
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

    热AI工具

    Undresser.AI Undress

    Undresser.AI Undress

    人工智能驱动的应用程序,用于创建逼真的裸体照片

    AI Clothes Remover

    AI Clothes Remover

    用于从照片中去除衣服的在线人工智能工具。

    Undress AI Tool

    Undress AI Tool

    免费脱衣服图片

    Clothoff.io

    Clothoff.io

    AI脱衣机

    AI Hentai Generator

    AI Hentai Generator

    免费生成ai无尽的。

    热门文章

    R.E.P.O.能量晶体解释及其做什么(黄色晶体)
    2 周前 By 尊渡假赌尊渡假赌尊渡假赌
    仓库:如何复兴队友
    4 周前 By 尊渡假赌尊渡假赌尊渡假赌
    Hello Kitty Island冒险:如何获得巨型种子
    4 周前 By 尊渡假赌尊渡假赌尊渡假赌

    热工具

    记事本++7.3.1

    记事本++7.3.1

    好用且免费的代码编辑器

    SublimeText3汉化版

    SublimeText3汉化版

    中文版,非常好用

    禅工作室 13.0.1

    禅工作室 13.0.1

    功能强大的PHP集成开发环境

    Dreamweaver CS6

    Dreamweaver CS6

    视觉化网页开发工具

    SublimeText3 Mac版

    SublimeText3 Mac版

    神级代码编辑软件(SublimeText3)

    vue3+vite:src使用require动态导入图片报错怎么解决 vue3+vite:src使用require动态导入图片报错怎么解决 May 21, 2023 pm 03:16 PM

    vue3+vite:src使用require动态导入图片报错和解决方法vue3+vite动态的导入多张图片vue3如果使用的是typescript开发,就会出现require引入图片报错,requireisnotdefined不能像使用vue2这样imgUrl:require(’…/assets/test.png’)导入,是因为typescript不支持require所以用import导入,下面介绍如何解决:使用awaitimport

    Vue3怎么解析markdown并实现代码高亮显示 Vue3怎么解析markdown并实现代码高亮显示 May 20, 2023 pm 04:16 PM

    Vue实现博客前端,需要实现markdown的解析,如果有代码则需要实现代码的高亮。Vue的markdown解析库有很多,如markdown-it、vue-markdown-loader、marked、vue-markdown等。这些库都大同小异。这里选用的是marked,代码高亮的库选用的是highlight.js。具体实现步骤如下:一、安装依赖库在vue项目下打开命令窗口,并输入以下命令npminstallmarked-save//marked用于将markdown转换成htmlnpmins

    Vue3如何实现刷新页面局部内容 Vue3如何实现刷新页面局部内容 May 26, 2023 pm 05:31 PM

    想要实现页面的局部刷新,我们只需要实现局部组件(dom)的重新渲染。在Vue中,想要实现这一效果最简便的方式方法就是使用v-if指令。在Vue2中我们除了使用v-if指令让局部dom的重新渲染,也可以新建一个空白组件,需要刷新局部页面时跳转至这个空白组件页面,然后在空白组件内的beforeRouteEnter守卫中又跳转回原来的页面。如下图所示,如何在Vue3.X中实现点击刷新按钮实现红框范围内的dom重新加载,并展示对应的加载状态。由于Vue3.X中scriptsetup语法中组件内守卫只有o

    Vue3复用组件怎么使用 Vue3复用组件怎么使用 May 20, 2023 pm 07:25 PM

    前言无论是vue还是react,当遇到多处重复代码的时候,我们都会想着如何复用这些代码,而不是一个文件里充斥着一堆冗余代码。实际上,vue和react都可以通过抽组件的方式来达到复用,但如果遇到一些很小的代码片段,你又不想抽到另外一个文件的情况下,相比而言,react可以在相同文件里面声明对应的小组件,或者通过renderfunction来实现,如:constDemo:FC=({msg})=>{returndemomsgis{msg}}constApp:FC=()=>{return(

    Vue3中如何使用defineCustomElement定义组件 Vue3中如何使用defineCustomElement定义组件 May 28, 2023 am 11:29 AM

    使用Vue构建自定义元素WebComponents是一组web原生API的统称,允许开发者创建可复用的自定义元素(customelements)。自定义元素的主要好处是,它们可以在使用任何框架,甚至是在不使用框架的场景下使用。当你面向的最终用户可能使用了不同的前端技术栈,或是当你希望将最终的应用与它使用的组件实现细节解耦时,它们会是理想的选择。Vue和WebComponents是互补的技术,Vue为使用和创建自定义元素提供了出色的支持。你可以将自定义元素集成到现有的Vue应用中,或使用Vue来构

    怎么用Vue3和Element Plus实现自动导入 怎么用Vue3和Element Plus实现自动导入 May 22, 2023 pm 04:58 PM

    1前言1.1目的ElementPlus使用按需引入,大大缩小打包后的文件大小1.2最终效果自动生成components.d.ts文件,并在文件中引入ElementPlus组件自动生成components.d.ts文件,并在文件中引入ElementPlusAPI2准备工作安装ElementPlus#选择一个你喜欢的包管理器#NPM$npminstallelement-plus--save#Yarn$yarnaddelement-plus#pnpm$pnpminstallelement-plus3按

    Vue3中怎么实现选取头像并裁剪 Vue3中怎么实现选取头像并裁剪 May 29, 2023 am 10:22 AM

    最终效果安装VueCropper组件yarnaddvue-cropper@next上面的安装值针对Vue3的,如果时Vue2或者想使用其他的方式引用,请访问它的npm官方地址:官方教程。在组件中引用使用时也很简单,只需要引入对应的组件和它的样式文件,我这里没有在全局引用,只在我的组件文件中引入import{userInfoByRequest}from'../js/api'import{VueCropper}from'vue-cropper&

    vue3怎么封装ECharts组件 vue3怎么封装ECharts组件 May 20, 2023 pm 03:22 PM

    一、前言前端开发需要经常使用ECharts图表渲染数据信息,在一个项目中我们经常需要使用多个图表,选择封装ECharts组件复用的方式可以减少代码量,增加开发效率。二、封装ECharts组件为什么要封装组件避免重复的工作量,提升复用性使代码逻辑更加清晰,方便项目的后期维护封装组件可以让使用者不去关心组件的内部实现以及原理,能够使一个团队更好的有层次的去运行封装的ECharts组件实现了以下的功能:使用组件传递ECharts中的option属性手动/自动设置chart尺寸chart自适应宽高动态展

    See all articles