这篇文章主要介绍了JavaScript Pinia代替Vuex的可行性实例分析的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇JavaScript Pinia代替Vuex的可行性实例分析文章都会有所收获,下面我们一起来看看吧。
在 Vue 3.0
出来之前,数据存储的主流依旧是 Vuex
。但是,当 Vue 3.0
问世后,官方为了迎合 Componsition API
,进而设计了全新的状态管理 Pinia
,而且未来的 Vuex 5
中提及的功能点正是 Pinia
目前已实现的。
! Vuex 5
提及的功能点:
更好的兼容 Componsition AP
更好的支持 TypeScript
优化 modules
的嵌套结构
支持热加载,无需刷新页面
Pinia
与 Vuex
对比:
Pinia
没有 mutations
,且 actions
支持同步/异步,Vuex
同步 mutations
,异步 actions
Pinia
相比 Vuex
拥有更好的 TypeScript
支持
Pinia
不再需要 modules
的嵌套结构,独立的 store
,扁平化处理得以更好的代码分割
Pinia
支持热加载,无需重载页面,保持现有状态
Pinia
在 Vue 3
中支持缓存,而 Vuex
则不再支持
Pinia
相比 Vuex
更加轻量化(体积约为 1K)
Pinia
支持 $reset
方法,可以初始化 state
Pinia
不支持 time-travel
功能,相对于 Vuex
调试功能还不成熟
Pinia
同样也支持 Vue 2.0
npm i pinia@next -S
index.js
:
import { createApp } from 'vue' import element from 'element-plus' import '@/assets/css/index.css' import router from '@/router/index' import App from './App' import { createPinia } from 'pinia' const app = createApp(App) app.use(element).use(router).use(createPinia()).mount('#root')
store/user.js
:
import { defineStore } from 'pinia' export const userStore = defineStore('user', { state: _ => { return { username: '张同学' } }, getters: { }, actions: { // 重置数据 _reset() { this.$reset() } } })
Home.vue
:
<template> <div> 姓名:{{ user_store.username }} <br /> <el-button @click="change_username">修改名称</el-button> <el-button @click="user_store._reset()">重置</el-button> </div> </template> <script> import { userStore } from '../store/user' export default { setup() { let user_store = userStore() // 初始化 user_store return { user_store } } } </script>
let user_store = userStore() /** * @description 修改用户名称 */ let update = _ => { user_store.username = '张三' }
let user_store = userStore() /** * @description 修改用户名称 */ let update = _ => { user_store.$patch({ username: '张三' }) }
let user_store = userStore() /** * @description 修改用户名称 */ let update = _ => { user_store.$patch(state => { state.username = '张三' }) }
let user_store = userStore() /** * @description 修改用户名称 */ let update = _ => { user_store.update_username('张三') } // 修改用户名称 update_username(value) { this.username = value }
从下面的截图我看可以看到自身的一些属性、方法等,诸如:$reset
,$patch
以及热更新相关的方法
关于“JavaScript Pinia代替Vuex的可行性实例分析”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“JavaScript Pinia代替Vuex的可行性实例分析”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。