前端框架 Nuxt3 集成 Pinia

Posted 2023-04-02 Dragon Wu

目录

一、Nuxt3集成Pinia

二、Pinia的使用

state的使用

1、基本使用及动态渲染

2、state的重置

3、批量更改state数据

getters的使用

1、getters的基本使用

2、getters传参

actions的使用

1、actions的基本使用

三、Pinia的持久化存储

---

一、Nuxt3集成Pinia

参考官方文档：简介 | Pinia

继承步骤看官方介绍，nuxt3里使用Pinia如下：

1、创建目录如下：

创建composables目录，再在该目录下创建store目录用于存放pinia的store文件，另外在composables目录下创建store.ts文件（文件名可自拟），由于composables目录下的自动导入功能，可以帮助我们快速使用store文件。

 我创建了便于管理的目录结构: 通过index索引文件可以方便的导出每个模块store的仓库。

/composables/store/user/index.ts:

export const user = defineStore("user", 
    state: () => 
        return 
            name: "Dragon Wu",
            age: 100,
            sex: "male",
            token: "xxx"
        
    
)

 /composables/store/index.ts索引所有store:

import user from "./user/index"

//模块
const stores = 
    user


export default stores

 /composables/store.ts自动导入，方便直接调用：

import stores from "./store/index"

export const useStore = stores

二、Pinia的使用

state的使用

1、基本使用及动态渲染

在上面基础上进行演示，

<template>
  <div>
    <span> name </span>
    <span> age </span>
    <span> sex </span>
    <span> token </span>
    <div>
      <button @click="changeName">changeName</button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import ref from "vue";
import storeToRefs from "pinia";

const user = useStore.user()
// 这种解构不能动态渲染
// const name, age, sex, token = user
// const name = ref < string > (user.name)
// const age = ref < number > (user.age)
// const sex = ref < string > (user.sex)
// const token = ref < string > (user.token)

//可动态渲染的解构如下：
const name, age, sex, token = storeToRefs(user)

const changeName = () => 
  user.name = "Mark"
  console.log(user.name)

</script>

页面上使用也很简单，就是先调用全局的自动导入useStore,useStore下有我们的各个store模块，选择user模块，并进行调用user(),便在页面里获取到了状态仓库user。

要注意的是： 普通结构和ref均不能进行动态渲染，要想修改时页面同时生效还需引入pinia的storeToRefs来包裹store仓库。

点击按钮后store发生了改变，同时动态渲染了页面的数据。 

2、state的重置

store.$reset()

//重置store
const reset = () => 
  user.$reset()

调用该函数后数据变回了最初的模样：

3、批量更改state数据

store.$patch(要更改的参数)

const patch=()=>
  user.$patch(
    name: "John",
    age: 3
  )

 调用函数后页面数据更新了

getters的使用

getters类似于computed拥有计算的缓存属性。

1、getters的基本使用

user的store文件修改如下：

export const user = defineStore("user", 
    state: () => 
        return 
            name: "Dragon Wu",
            age: 100,
            sex: "male",
            token: "xxx"
        
    ,
    getters: 
        getNewName: (state) => 
            return state.name + ":New"
        
    
)

页面中使用：  store.get属性名

<template>
    ...
    <div>
      <span>user.getNewName</span>
    </div>
  </div>
</template>
<script lang="ts" setup>
//...

const user = useStore.user()

</script>

 获取到了getters里的计算属性

更多参考：Getter | Pinia

2、getters传参

将刚才的getters修改如下：

getters: 
        getNewName: (state) => 
            return (s: string) => state.name + s
        
    

页面调用如下：

   <div>
      <span>user.getNewName('xxx')</span>
    </div>

可以看到传参调用成功。基本就是个函数嵌套实现。

actions的使用

actions类似于method属性，用于处理业务逻辑的

1、actions的基本使用

 也是在user的store里书写案例如下：

export const user = defineStore("user", 
    state: () => 
        return 
            name: "Dragon Wu",
            age: 100,
            sex: "male",
            token: "xxx"
        
    ,
    getters: 
        //...
    ,
    actions: 
        growUp() 
            this.age++
        ,
        changeName(s: string) 
            this.name = s
        
    
)

页面调用

<template>
  <div>
    //...
    <div>
      <span> user.age </span>
    </div>
    <div><span> user.name </span></div>
    <div>
      <button @click="growUp">growUp</button>
      <button @click="changeName">changeName</button>
    </div>
  </div>
</template>
<script lang="ts" setup>
//...
const user = useStore.user()
const growUp = () => 
  user.growUp()

const changeName = () => 
  user.changeName("John")


</script>

actions调用成功！

此外，向token的请求存储都可以在action里面实现。 

三、Pinia的持久化存储

pinia默认是不会自动持久化存储的，当页面刷新时数据还是会丢失，此时需要使用自动持久化插件，Nuxt3的使用方法参考插件官网文档：

Usage with Nuxt3 | pinia-plugin-persistedstate

Nuxt.js 集成 koa2

安装 koa 框架

// 安装 koa 框架
$ npm install koa -S

koa 启动文件

在项目目录下新建server目录，并新建index.js ，index.js 代码如下：

const Koa = require('koa')
const { Nuxt, Builder } = require('nuxt')

const app = new Koa()
const host = process.env.HOST || '127.0.0.1'
const port = process.env.PORT || 3000

// Import and Set Nuxt.js options
let config = require('../nuxt.config.js')
config.dev = !(app.env === 'production')

// Instantiate nuxt.js
const nuxt = new Nuxt(config)

// Build in development
if (config.dev) {
  const builder = new Builder(nuxt)
  builder.build().catch(e => {
    console.error(e) // eslint-disable-line no-console
    process.exit(1)
  })
}

app.use(ctx => {
  ctx.status = 200 // koa defaults to 404 when it sees that status is unset

  return new Promise((resolve, reject) => {
    ctx.res.on('close', resolve)
    ctx.res.on('finish', resolve)
    nuxt.render(ctx.req, ctx.res, promise => {
      // nuxt.render passes a rejected promise into callback on error.
      promise.then(resolve).catch(reject)
    })
  })
})

app.listen(port, host)
console.log('Server listening on ' + host + ':' + port) // eslint-disable-line no-console

修改配置文件 package.json

  "scripts": {
    "dev": "node server/index.js",
    "build": "nuxt build",
    "start": "NODE_ENV=production node server/index.js",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint"
  },

启动项目

$ npm run dev

访问 http://localhost:3000/ ，可以查看运行结果：

集成 koa-router 路由

安装koa-router

// koa2的路由对应版本是 7.x
npm install --save koa-router@7

新建 router 文件

在 server 里面新建 routers 文件夹，然后新建 index.js ，然后添加如下代码：

const router = require('koa-router')()

router.get('/q', function (ctx) {
  ctx.body = 'ok'
})
module.exports = router

引入 koa-router

修改 server/index.js ，引入 koa-router

const routers = require('./routers/index')

// 初始化路由中间件
app.use(routers.routes()).use(routers.allowedMethods())

测试路由

// 运行项目
npm run dev

访问 http://localhost:3000/q

注意事项

// 初始化路由中间件
app.use(routers.routes()).use(routers.allowedMethods())

一定要在调用 nuxt.render() 前面，这样访问路由的时候会先检验 routers 是否定义了路由，如果定义了则调用routers 里面的方法，如果没有定义会检测 nuxt 是否存在相应的路由，如果定义了则进入相应的页面，如果没有定义则 显示 404

全栈部落	区块链部落

扫描二维码

加入全栈部落

可点击下方“阅读原文”了解更多详情