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的使用:
-
项目目录结构
image.png -
state.js 中定义的基本数据
image.png -
getters.js 中对state中声明的数据可进行进一步的逻辑处理
image.png -
mutations.js 中定义方法对state中的数据进行修改
image.png -
actions.js 处理异步请求,然后通过触发mutation中定义的同步方法修改state值;
image.png -
modules: vuex中管理的数据过多时,可以通过modules模块的方式对需要全局管理的数据进行模块化管理
模块化示例1.png
模块化示例2.png -
页面中的使用示例
image.png
2 注意事项
- 页面刷新,vuex的数据会丢失; 可以通过安装 vuex-persistedstate插件解决;
- 如果state,getters,mutations,actions中的生命的方法或变量与modules中的方法或变量重名的话,会出现异常,一般通过namespaced解决;
参考文档
vuex
Vuex ——详细介绍
Vue之Vuex
VEX的Modules的使用
namespaced解决vuex中命名冲突
