美文网首页react & vue & angular
vue - vuex 的安装与使用

vue - vuex 的安装与使用

作者: 梁庄十年 | 来源:发表于2022-08-07 16:24 被阅读0次

1 vuex的安装

npm i vuex -S
or
npm install vuex@(指定版本) -S

2 vuex的使用

2.1 vuex的核心模块:

State: 单一的静态树, 可以理解为定义属性;
Getters: 状态获取,可以对state中的数据进行处理后,再返回; 可以理解成取值,类似get方法;
Mutations: 触发同步事件,用于修改state中的值;
Actions: 用于处理异步请求, 再触发mutations中的同步方法,修改state中的数据;
Module: 将vuex进行模块化管理;一般用于大型项目,使vuex中的数据结构更加清晰;

2.2 vuex的使用:
  1. 项目目录结构


    image.png
  2. state.js 中定义的基本数据


    image.png
  3. getters.js 中对state中声明的数据可进行进一步的逻辑处理


    image.png
  4. mutations.js 中定义方法对state中的数据进行修改


    image.png
  5. actions.js 处理异步请求,然后通过触发mutation中定义的同步方法修改state值;


    image.png
  6. modules: vuex中管理的数据过多时,可以通过modules模块的方式对需要全局管理的数据进行模块化管理


    模块化示例1.png
    模块化示例2.png
  7. 页面中的使用示例


    image.png

2 注意事项

  1. 页面刷新,vuex的数据会丢失; 可以通过安装 vuex-persistedstate插件解决;
  2. 如果state,getters,mutations,actions中的生命的方法或变量与modules中的方法或变量重名的话,会出现异常,一般通过namespaced解决;

参考文档

vuex
Vuex ——详细介绍
Vue之Vuex
VEX的Modules的使用
namespaced解决vuex中命名冲突

相关文章

  • vue安装veux

    现在使用npm i 会默认安装vuex4,vuex4只适用于vue3,如果使用的vue环境是vue3,安装vuex...

  • Vuex

    vuex的作用是在vue的项目中方便与页面与页面之间值的传递。 一. 安装vuex,使用命令 二. 引入vuex ...

  • VueX--VUE核心插件

    使用VueX方法 1.安装vuex模块 npm install vuex --save 2.作为插件使用 Vue....

  • vue2 vuex的使用

    vuex在vue2中的使用与在vue3中不同,首先,需要安装vuex3而不是vuex4,然后,需要在全局中进行定义...

  • vuex

    安装、使用 vuex 首先我们在 vue.js 2.0 开发环境中安装 vuex : 然后 , 在 main.js...

  • Vuex 全局状态数据管理

    一、安装、使用 vuex vue.js 2.0 开发环境中安装 vuex 创建 store 文件夹和 index....

  • 04 Vue中组件通信(下)

    使用vuex来实现组件通信一、vuex 的安装与使用 安装npm install vuex -S 使用 二、 vu...

  • Vuex笔记

    Vuex 安装插件 Vue use(Vuex) 创建对象 module是模块的意思,为什么在Vuex中我们要使用模...

  • 07-6 vuex.md

    安装、使用 vuex 首先我们在 vue.js 2.0 开发环境中安装 vuex : 然后在src目录新建stor...

  • Vuex

    简介:vue官方提供的状态管理器 vuex的使用步骤: 安装:npm install --save vuex; 在...

网友评论

    本文标题:vue - vuex 的安装与使用

    本文链接:https://www.haomeiwen.com/subject/kqikoltx.html