vue - vuex 的安装与使用

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中命名冲突