温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

JavaScript Pinia代替Vuex的可行性实例分析

发布时间:2022-07-29 13:56:58 来源:亿速云 阅读:92 作者:iii 栏目:开发技术

这篇文章主要介绍了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 的嵌套结构

    • 支持热加载,无需刷新页面

    二、对比

    PiniaVuex 对比:

    1. Pinia 没有 mutations,且 actions 支持同步/异步,Vuex 同步 mutations,异步 actions

    2. Pinia 相比 Vuex 拥有更好的 TypeScript 支持

    3. Pinia 不再需要 modules 的嵌套结构,独立的 store,扁平化处理得以更好的代码分割

    4. Pinia 支持热加载,无需重载页面,保持现有状态

    5. PiniaVue 3 中支持缓存,而 Vuex 则不再支持

    6. Pinia 相比 Vuex 更加轻量化(体积约为 1K)

    7. Pinia 支持 $reset 方法,可以初始化 state

    8. Pinia 不支持 time-travel 功能,相对于 Vuex 调试功能还不成熟

    9. Pinia 同样也支持 Vue 2.0

    三、使用

    1. 安装

    npm i pinia@next -S

    2. 注册

    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')

    3. 创建单个 store

    store/user.js

    import { defineStore } from 'pinia'
    export const userStore = defineStore('user', {
      state: _ => {
        return {
          username: '张同学'
        }
      },
      getters: {
      },
      actions: {
        // 重置数据
        _reset() {
          this.$reset()
        }
      }
    })

    4. 组件内引用

    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>

    5. 更新 store  数据的4种方式

    (1)直接修改特定的值
    let user_store = userStore()
    /**
     * @description 修改用户名称
     */
    let update = _ => {
      user_store.username = '张三'
    }
    (2)利用 $patch 批量修改
    let user_store = userStore()
    /**
     * @description 修改用户名称
     */
    let update = _ => {
      user_store.$patch({
      	username: '张三' 
      })
    }
    (3)利用 $patch 单个修改特定的值
    let user_store = userStore()
    /**
     * @description 修改用户名称
     */
    let update = _ => {
      user_store.$patch(state => {
        state.username = '张三'
      })
    }
    (4)利用 Actions 修改
    let user_store = userStore()
    /**
     * @description 修改用户名称
     */
    let update = _ => {
      user_store.update_username('张三')
    }
    // 修改用户名称
    update_username(value) {
      this.username = value
    }

    6. 其他

    从下面的截图我看可以看到自身的一些属性、方法等,诸如:$reset$patch 以及热更新相关的方法

    JavaScript Pinia代替Vuex的可行性实例分析

    关于“JavaScript Pinia代替Vuex的可行性实例分析”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“JavaScript Pinia代替Vuex的可行性实例分析”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注亿速云行业资讯频道。

    向AI问一下细节

    免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

    AI