Vue3中Vuex的详细使用方法

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

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)

多页状态管理

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 'vuex'
const store = useStore()
store.commit('increment')

mution 的参数与传参方法

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

// ...state定义count
mutations: {
  sum (state, num) {
    state.count += num
  }
}

通过 commit 的payload 进行参数传递

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

<h2>{{this.$store.state.count}}</h2>
<button @click="add(10)">++</button>
...
<script setup>
// 获取store实例,获取方式看上边获取store实例方法
const add = (num) => {
  store.commit('sum', num)
}
</script>

mution 的提交风格

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

用这种方式进行 mution 的提交

const add = (num) => {
  store.commit({
    type: 'sum',  // 类型就是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('sum', num)  // 通过context去触发mutions中的sum
    }, 1000)
  }
},

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

// ...template
store.dispatch('sum_actions', num)

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

// ...
const addAction = (num) => {
  store.dispatch('sum_actions', {
    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('sum', payload.num)
            resolve('异步操作执行成功')
          } else {
            reject(new Error('异步操作执行错误'))
          }
        }, 1000)
      })
    }
  },

4. getters

类似于组件的计算属性

import { createStore } from 'vuex'

export default createStore({
  state: {
    students: [{ name: 'mjy', age: '18'}, { name: 'cjy', age: '22'}, { name: 'ajy', age: '21'}]
  },
  getters: {
    more20stu (state) { return state.students.filter(item => item.age >= 20)}
  }
})

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

//...template
<h2>{{$store.getters.more20stu}}</h2> // 展示出小于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
<h2>{{$store.getters.more20stu}}</h2> // 展示出小于20岁的学生
<h2>{{$store.getters.moreAgestu(18)}}</h2> // 通过参数传递, 展示出年龄小于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 'vuex'
import user from './modules/user.js'
import user from './modules/pay.js'
import user from './modules/cat.js'
export default createStore({
  modules: {
    user,
    pay,
    cat
  }
})

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

<h2>{{$store.state.user.count}}</h2>
store.commit('user/sum', num) // 参数带上模块名称
store.dispatch('user/sum_actions', sum)

总结

到此这篇关于Vue3中Vuex详细使用的文章就介绍到这了,更多相关Vue3中Vuex使用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 快速掌握Vue3.0中如何上手Vuex状态管理

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试工具 devtools,提供了诸如零配置的 time-travel 调试.状态快照导入导出等高级调试功能. 如果您不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的.确实是如此--如果您的应用够简单,您最好不要使用 Vuex.一个简单的 store 模式就足够您所需了.但是,如果您需要构建一个中大型

  • Vue3中Vuex状态管理学习实战示例详解

    目录 引言 一.目录结构 二.版本依赖 三.配置Vuex 四.使用Vuex 引言 Vuex 是 Vue 全家桶重要组成之一,专为 Vue.js 应用程序开发的 状态管理模式 + 库 ,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 一.目录结构 demo/ package.json vite.config.js index.html public/ src/ api/ assets/ common/ components/ store/ index.

  • Vue3中vuex的基本使用方法实例

    目录 一.基本结构 二.基本使用 三.将store中的数据模块化后的使用 1.模块化 2.使用 补充:如何改变vuex中的属性 总结 一.基本结构 src/store/index.js中,代码如下 // vue3中创建store实例对象的方法createStore()按需引入 import { createStore } from 'vuex' export default createStore({ state: { }, mutations: { }, actions: { }, gette

  • vue3中vuex与pinia的踩坑笔记记录

    目录 介绍 安装使用 简单对比写法差异与共同点 Vuex 和 Pinia 的优缺点 何时使用Pinia,何时使用Vuex 总结 介绍 Pinia 是 Vue.js 的轻量级状态管理库,最近很受欢迎.它使用 Vue 3 中的新反应系统来构建一个直观且完全类型化的状态管理库. Pinia的成功可以归功于其管理存储数据的独特功能(可扩展性.存储模块组织.状态变化分组.多存储创建等). 另一方面,Vuex也是为Vue框架建立的一个流行的状态管理库,它也是Vue核心团队推荐的状态管理库.Vuex高度关注应

  • Vue3中Vuex的详细使用方法

    目录 Vuex是做什么的? 状态管理是什么? 单页面的状态管理 vuex(Vue3.2版本) 多页状态管理 vuex store对象属性介绍 Vue3中获取 store 实例对象的方法 1. state 2. mutations 3. actions 4. getters 5. modules 总结 Vuex是做什么的? Vue官方:状态管理工具 状态管理是什么? 需要在多个组件中共享的状态.且是响应式的.一个变,全都改变. 例如一些全局要用的的状态信息:用户登录状态.用户名称.地理位置信息.购

  • Vue3中10多种组件通讯方法小结

    目录 Props emits expose / ref Non-Props 单个根元素的情况 多个元素的情况 v-model 单值的情况 多个 v-model 绑定 v-model 修饰符 插槽 slot 默认插槽 具名插槽 作用域插槽 provide / inject 总线 bus getCurrentInstance Vuex State Getter Mutation Action Module Pinia 安装 注册 mitt.js 安装 使用 本文讲解 Vue 3.2 组件多种通讯方式

  • vue3中$refs的基本使用方法

    1.在vue2中可以通过this来访问到$refs,vue3中由于没有this所以获取不到了,但是官网中提供了方法来获取 知道了怎么获取后,我们结合ElementPlus来使用,因为项目中用到了ElementPlus的表单验证,官网也是醉了,还写的是vue2的写法 话不多说,上代码 由于我得form表单外面包了一层el-dialog,是不能在onMounted中获取到$refs的,应该在触发对应事件,让dialog绑定的v-model变为true的获取获取 label-position="lef

  • Vue3 中自定义插件的实现方法

    目录 1. Vue 插件 2. 自定义插件 2.1 基本用法 2.2 加入组件 2.3 加入指令 2.4 provide & inject 3. 小结 最近在录 TienChin 项目,项目涉及到了 Vue 中插件的定义,因此整了这么一篇文章,手把手教大家在 Vue3 中定义插件,这个技能掌握了,就可以看懂 TienChin 前端代码了. 1. Vue 插件 在 Vue 中,一些简单的功能,我们可以直接定义为全局方法,然后挂到 Vue 上就能使用了,例如在 vhr 中,我们将网络请求方法进行封装

  • vue3中的抽离封装方法实现

    目录 vue3的抽离封装方法: 1.新建公共utils/publicModule文件 2.vue组件页面中引入使用 vue3的抽离封装方法: vue3中的任何一个组合式api都可以单独抽离出去在另一个文件,最后只需要回归到setup()中即可. 1.新建公共utils/publicModule文件 // 公共的数据和方法 import { reactive } from "vue" const publicModule = ()=>{ const res = reactive({

  • vue2 vue3中使用Echarts详细

    目录 1.安装 2.vue2中使用Echarts 在main.js文件中 给定一个容器 3.vue3中使用Echarts 在根组件里引入echart,一般是App.vue 在需要使用的页面,定义div 然后在需要使用到Echarts的页面inject 1.安装 npm install echarts --save 2.vue2中使用Echarts 在main.js文件中 // 引入echarts import echarts from 'echarts' Vue.prototype.$echar

  • vue3中cookie的详细使用过程

    目录 前言 1.vue中cookie的安装 2.登录过程中cookies的设置 3.在需要的地方拿到之前存入的cookies 总结 前言 cookie使用最多的地方想必是保存用户的账号与密码,可以避免用户每次登录时都要重新输入 1.vue中cookie的安装 在终端中输入命令npm install vue-cookies --save,即可安装cookies,安装之后在main.js文件中写下以下代码 import { createApp } from 'vue' import VueCooki

随机推荐