目录
前言
vue2和vue3中如何使用vuex呢？有什么不同之处呢？vue3中vuex如何做持久化处理呢？本篇文章将给你答疑解惑，一起来看一下吧~
一、什么是vuex？
官网：vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
vuex可以统一管理项目中公用的数据，借助vue调试工具可以记录每一次的修改，以及修改者。
1. vuex中的模块
vuex中有五大模块,分别是：
- state -------->需要管理的数据存放在这里
- mutations------->唯一可以同步修改state的地方
- actions------->异步修改state,本质还是通过mutations修改
- getters------->类似组件中的计算属性
- modules------->如果需要vuex管理的数据多的话，可以拆分为一个个模块
2. 快速上手
这里就不给大家过多介绍了，可以看一下之前的博客：快速了解vuex，里面也有vue2中使用方式哦~
二、vue3中使用vuex
1. 准备
-
src/store文件夹下新建modules文件夹 -
modules文件夹下新建user.js文件
代码如下（示例）：
// 用户
export default {
// 开启命名空间
namespaced: true,
state: {
info: {
uname: 'Leo',
age: 21
}
},
mutations: {
updateUname(state, val) {
state.info.uname = val
},
updateAge(state, val) {
state.info.age = val
}
},
actions: {
asyncUpdate(store, val) {
setTimeout(() => {
store.commit('updateAge', val)
}, 2000)
}
},
getters: {
format(state) {
return state.info.uname + ',nice to meet you~'
}
}
}
-
modules文件夹下新建global.js文件作为公共模板,不开启命名空间
代码如下（示例）：
// 全局
export default {
state: {},
mutations: {},
actions: {},
getters: {}
}
-
src/store文件夹下的index.js文件中引入上面两个文件
import { createStore } from 'vuex'
import global from './modules/global.js'
import user from './modules/user.js'
export default createStore({
// 公共模板直接在这里展开就可以
...global,
modules: {
user
}
})
2. 使用
在任意一个.vue结尾的文件中使用
代码如下（示例）：
<template>
<div>同步修改state：{{ $store.state.user.info.uname }}</div>
<p>-----------------------------------------------</p>
<div>异步修改state:{{ $store.state.user.info.age }}</div>
<p>-----------------------------------------------</p>
<div>getters数据:{{ $store.getters['user/format'] }}</div>
<button @click="handleClick">修改</button>
</template>
<script>
import { useStore } from 'vuex'
export default {
name: 'App',
setup() {
const store = useStore()
const handleClick = () => {
console.log(store)
store.commit('user/updateUname', 'Tom')
store.dispatch('user/asyncUpdate', 23)
}
return { handleClick }
}
}
</script>
结论：
- setup中执行顺序在
beforeCreate和created之前(vue3中setup替代了这俩生命周期钩子函数)- vue3中没有this，组合API写法需要用到什么，就按需引入什么
- ,需要处理vuex中的数据，就需要从vuex中按需引入
useStore- 模板中使用与vue2类似
三、 vuex持久化
1. 为什么需要持久化处理？
如果不做初始化，刷新页面，vuex中代码重新执行，数据就会丢失。
2. 如何做持久化处理？
手动持久化处理代码比较零散，这里使用vuex提供的包来进行持久化处理。
- 安装依赖
npm i vuex-persistedstate - 初始化
在src/store文件下的index.js文件中
import createPersistedstate from 'vuex-persistedstate'
export default createStore({
// 省略其他
plugins: [
createPersistedstate({
key: 'saveInfo',
paths: ['user', 'cart']
})
]
})
3. 效果展示
注：默认存储在localStorage中
结论：
- 基于第三包实现vuex中的数据持久化
- 触发持久化的条件是state的变化
总结
can’t stop step