用Pinia.js 来重构一下之前Vuex的一个小Demo

简介: # PiniaPinia 是一个用于 Vue 的状态管理库,类似 Vuex, 是 Vue 的另一种状态管理方案 Pinia 支持 Vue2 和 Vue3。# Pinia的优势1.Pinia拥有完整的 typescript 的支持;2. 无mutations,相比Vuex更简单,更容易上手。3. 自动添加Pinia,无需创建store,简化开发。4. actions对同步异步支持非常好。5. 代码分割好,非常优雅便于维护。# pinia的安装`npm install pinia --save`# srore/index.ts先看一下store/index.

Pinia

Pinia 是一个用于 Vue 的状态管理库,类似 Vuex, 是 Vue 的另一种状态管理方案
Pinia 支持 Vue2 和 Vue3。

Pinia的优势

1.Pinia拥有完整的 typescript 的支持;

  1. 无mutations,相比Vuex更简单,更容易上手。
  2. 自动添加Pinia,无需创建store,简化开发。
  3. actions对同步异步支持非常好。
  4. 代码分割好,非常优雅便于维护。

pinia的安装

npm install pinia --save

srore/index.ts

先看一下store/index.ts文件内容

    import { createPinia } from "pinia";

    const store = createPinia();

    export default store;

首先首行导入createPinia函数,然后通过调用createPinia()来创建store。

store/users.ts的demo

//src/store/user.ts

import { defineStore } from 'pinia'

export const useUserStore = defineStore({
  id: 'user', // id必填,且需要唯一
  state: () => {
    return {
      name: '张三'
    }
  },
  actions:{
    updataName(name:string):void {
        this.name = name;
    }
  }
})

我们首先导入了defineStore的方法,定义了id:'user',id必填,且需要唯一

state中return出去变量。在actions(0中定义函数方法。

接下来我们看一下main.ts的内容。

main.ts

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import store from './store';

const app = createApp(App);
app.use(store);
app.mount("#app");

我们注意,要use下store.

App.vue的内容

代码如下:

<template>
  <div>{{ userStore.name }}</div>
</template>

<script lang="ts" setup>
import { useUserStore } from './store/user'

const userStore = useUserStore();
userStore.updataName("李四");
</script>

我们正常创建组件部分和脚本部分。

我们记得从'./store/user'中导出useUserStore。

const userStore = useUserStore();

创建userStore,通过 useUserStore()来完成创建。

接下来我们调用userStore.updataName()的方法(之前在user.ts中定义的方法)记得传参。

userStore.updataName("李四");

看看效果吧

我们调出控制台

输入

npm run dev

好耶,vite还是很快的完成了。

image.png

看看

我们最后显示出来的字体是 李四

而不是张三

说明我们定义的修改的函数生效了。

相关文章
|
10月前
|
JavaScript 前端开发 Python
Node.js在Python中的应用实例demo
Node.js在Python中的应用实例demo
79 2
|
10月前
|
存储 JavaScript 前端开发
Vuex详解:Vue.js的状态管理方案
Vuex详解:Vue.js的状态管理方案
104 1
|
11月前
|
JavaScript
js根据月份获取天数和对应的星期demo(整理)
js根据月份获取天数和对应的星期demo(整理)
|
3月前
|
前端开发 应用服务中间件 nginx
Next.js 创建项目到服务器部署(目录结构介绍、项目结构Demo、开发细节注意)
Next.js 创建项目到服务器部署(目录结构介绍、项目结构Demo、开发细节注意)
779 0
|
7天前
|
JavaScript 前端开发
JavaScript——一个简单的队列Demo
JavaScript——一个简单的队列Demo
21 4
|
10天前
|
缓存 JavaScript 前端开发
微信 JS-SDK Demo “分享信息设置” API 及数字签名生成方法(NodeJS版本)
微信 JS-SDK Demo “分享信息设置” API 及数字签名生成方法(NodeJS版本)更新时间(2020-10-29)
|
2月前
|
JavaScript 前端开发 程序员
探索Vue.js宝库:解锁基础知识与实用技能之门(1. 数据绑定与响应式 2. 条件与循环 3. 组件化开发;1. 路由管理与导航 2. 状态管理与Vuex 3. Vue.js的生命周期)
探索Vue.js宝库:解锁基础知识与实用技能之门(1. 数据绑定与响应式 2. 条件与循环 3. 组件化开发;1. 路由管理与导航 2. 状态管理与Vuex 3. Vue.js的生命周期)
31 1
|
3月前
|
JavaScript 前端开发
JS实现网页页面的框架(demo)
JS实现网页页面的框架(demo)
25 1
|
11月前
|
存储 JavaScript 前端开发
前端(十)——深入剖析 Vuex:Vue.js 应用的状态管理神器
前端(十)——深入剖析 Vuex:Vue.js 应用的状态管理神器
190 0
|
3月前
|
JavaScript 前端开发
Vue.js中的状态管理:理解和使用Vuex
Vuex是Vue.js的一个状态管理库,它可以帮助我们更好地管理应用程序的状态。在Vue.js中,组件之间的通信往往需要借助于props和emit来完成,但是当应用程序的状态变得比较复杂时,这种方式就变得比较麻烦。Vuex可以帮助我们更好地管理状态,以及在组件之间共享状态。

热门文章

最新文章