关键词搜索

全站搜索
×
密码登录在这里
×
注册会员

已有账号? 请点击

忘记密码

已有账号? 请点击

使用其他方式登录

pinia和vuex区别

发布2022-07-07 浏览1236次

详情内容

Vuex和Pinia都是vue.js的状态管理工具,Vuex是vue2使用,而在vue3推荐了Pinia, 那pinia和vuex的有什么区别呢?

主要有以下几点区别:

  • 它没有mutation,他只有state,getters,action【同步、异步】使用他来修改state数据

  • 他默认也是存入内存中,如果需要使用本地存储,在配置上比vuex麻烦一点

  • 语法上比vuex更容易理解和使用,灵活。

  • pinia没有modules配置,没一个独立的仓库都是definStore生成出来的、

  • state是一个对象返回一个对象和组件的data是一样的语法


介绍

Pinia 是 Vue.js 的轻量级状态管理库,它使用 Vue 3 中的新反应系统来构建一个直观且完全类型化的状态管理库。
Vuex也是为Vue框架建立的一个流行的状态管理库,它也是Vue核心团队推荐的状态管理库。 Vuex高度关注应用程序的可扩展性、开发人员的工效和信心。它基于与redux相同的流量架构。

安装

pinia安装

pinia很容易上手,因为他只需要安装和创建一个store

安装命令:

yarn add pinia@next

npm install pinia@next

cnpm install vuex@next --save-


设置为全局对象,在main.js中引用

import { createPinia } from "pinia";// 创建pinia实例const pinia = createPinia()app.use(pinia)


vuex安装

Vuex 也很容易,需要安装和创建store。

npm install vuex@next --save

yarn add vuex@next --save

cnpm install pinia@next


在根目录下引用

import {useStore} from './store'app.use(store)


创建

pinia创建
// stores/todo.jsimport { defineStore } from 'pinia'export const useTodoStore = defineStore({
  id: 'todo',
  state: () => ({ count: 0, title: "Cook noodles", done:false })})


vuex创建
//store.jsimport {createStore} from 'vuex'const useStore = createStore({
  state: {
    todos: [
      { id: 1, title: '...', done: true }
    ]
  },
  getters: {
    doneTodos (state) {
      return state.todos.filter(todo => todo.done)
    }
  }})


两者写法对比

vuex 和 pinia 是同团队成员编写,但是 pinia 写法上更加人性化,也更简单

pinia在vue3中的写法和用法
// store.jsimport { defineStore } from "pinia"// defineStore 调用后返回一个函数,调用该函数获得 Store 实体export const GlobalStore = defineStore({
  // id: 必须的,在所有 Store 中唯一
  id: "myGlobalState",
  // state: 返回对象的函数
  state: () => ({
    a: 1,
  }),
  getters: {},
  actions: {
    setXXX(number) {
      this.a = number;
    },
  },});// 在vue3中使用<template>
    <div>
        {{number}}
        <button @click="clickHandle">按钮</button>
    </div></template><script>import {GlobalStore} from "@/store/store.js"export default {
    setup(){
        let store = GlobalStore();
        //如果直接取state的值必须使用computed才能实现数据的响应式 如果直接取 store.state.a 则不会监听到数据的变化,或者使用getter,就可以不使用computed (这边和vuex是一样的)
        let number = computed(()=>store.a)
        const clickHandle = () => {
            store.setXXX("100")
        }
        return{number,clickHandle}
    }}<script>


vuex在vue3中的写法和用法
// store.jsimport { createStore } from "vuex"export default createStore({
    // 定义数据
    state: { a:1 },
    // 定义方法
    mutations: {
        xxx(state,number){
            state.a = number        }
    },
    // 异步方法
    actions: { },
    // 获取数据
    getters: { getA:state=>return state.a }})// 在vue3中使用<template>
    <div>
        {{number}}
        <button @click="clickHandle">按钮</button>
    </div></template><script>import {useStore} from "vuex"export default {
    setup(){
        let store = useStore()
        //如果直接取state的值必须使用computed才能实现数据的响应式 如果直接取 store.state.a 则不会监听到数据的变化,或者使用getter,就可以不使用computed
        let number = computed(()=>store.state.a)
        const clickHandle = () => {
            store.commit("xxx","100")
        }
        return{number,clickHandle}
    }}<script>


由此两个代码的对比我们可以看出使用 pinia 更加的简洁,轻便。pinia 取消了原有的 mutations,合并成了 actions,且我们在取值的时候可以直接点到那个值,而不需要在.state,方法也是如此。

Vuex 和 Pinia 的优缺点

Pinia的优点
  • 完整的 TypeScript 支持:与在 Vuex 中添加 TypeScript 相比,添加 TypeScript 更容易

  • 极其轻巧(体积约 1KB)

  • store 的 action 被调度为常规的函数调用,而不是使用 dispatch 方法或 MapAction 辅助函数,这在 Vuex 中很常见

  • 支持多个Store

  • 支持 Vue devtools、SSR 和 webpack 代码拆分

Pinia的缺点
  • 不支持时间旅行和编辑等调试功能

Vuex的优点
  • 支持调试功能,如时间旅行和编辑

  • 适用于大型、高复杂度的Vue.js项目

Vuex的缺点
  • 从 Vue 3 开始,getter 的结果不会像计算属性那样缓存

  • Vuex 4有一些与类型安全相关的问题

何时使用Pinia,何时使用Vuex

个人感觉:,由于Pinea是轻量级的,体积很小,它适合于中小型应用。它也适用于低复杂度的Vue.js项目,因为一些调试功能,如时间旅行和编辑仍然不被支持。
将 Vuex 用于中小型 Vue.js 项目是过度的,因为它重量级的,对性能降低有很大影响。因此,Vuex 适用于大规模、高复杂度的 Vue.js 项目。

点击QQ咨询
开通会员
上传资源赚钱
返回顶部
×
  • 微信支付
  • 支付宝付款
扫码支付
微信扫码支付
请使用微信描二维码支付
×

提示信息

×

选择支付方式

  • 微信支付
  • 支付宝付款
确定支付下载