新增pinia测试例

Author: anne-xml

main.js

@@ -22,18 +22,23 @@ app.$mount()
 // #ifdef VUE3
 import {
 	createSSRApp
-} from 'vue'
+} from 'vue'
+import * as Pinia from 'pinia';
+import Vuex from "vuex";
 export function createApp() {
 	const app = createSSRApp(App)
-	app.use(store)
+	app.use(store)
+	app.use(Pinia.createPinia());
 	app.config.globalProperties.$adpid = "1111111111"
 	app.config.globalProperties.$backgroundAudioData = {
 		playing: false,
 		playTime: 0,
 		formatedPlayTime: '00:00:00'
 	}
 	return {
-		app
+		app,
+		Vuex, // 如果 nvue 使用 vuex 的各种map工具方法时，必须 return Vuex
+		Pinia // 此处必须将 Pinia 返回
 	}
 }
 // #endif

pages.json

@@ -1336,6 +1336,17 @@
 						"navigationBarTitleText": "GlobalData和vuex"
 					}
 				}
+				// #ifdef VUE3
+				,
+				{
+					"path" : "pinia/pinia",
+					"style" :
+					{
+						"navigationBarTitleText" : "pinia"
+					}
+				}
+				// #endif
+
 			]
 		}
 	],

pages/tabBar/template/template.nvue

@@ -122,6 +122,12 @@
 						name: 'GlobalData和vuex',
 						url: 'global'
 					},
+					// #ifdef VUE3
+					{
+						name: 'pinia',
+						url: 'pinia'
+					},
+					// #endif
 					{
 						name: 'renderjs',
 						url: 'renderjs'

pages/template/pinia/pinia.test.js

@@ -0,0 +1,50 @@
+describe('test pinia', () => {
+  let page,containsVite;
+  containsVite = process.env.UNI_CLI_PATH.includes('uniapp-cli-vite')
+  if (!containsVite) {
+	// Vue 2 项目暂不支持 Pinia
+    it('is vue2', async () => {
+      expect(1).toBe(1)
+    })
+    return
+  }
+  beforeAll(async () => {
+    page = await program.reLaunch('/pages/template/pinia/pinia')
+    await page.waitFor('view');
+  });
+  it('check page data', async () => {
+    const count = await page.$('.count');
+    expect(await count.text()).toEqual('当前计数：0');
+    const doubleCount = await page.$('.doubleCount');
+    expect(await doubleCount.text()).toEqual('计数翻倍：0');
+  });
+  it('store incrementCounter', async () => {
+    await page.callMethod('incrementCounter')
+    const count = await page.$('.count');
+    expect(await count.text()).toEqual('当前计数：1');
+    const doubleCount = await page.$('.doubleCount');
+    expect(await doubleCount.text()).toEqual('计数翻倍：2');
+  });
+  it('store incrementPatchCounter', async () => {
+    await page.callMethod('incrementPatchCounter')
+    const count = await page.$('.count');
+    expect(await count.text()).toEqual('当前计数：2');
+    const doubleCount = await page.$('.doubleCount');
+    expect(await doubleCount.text()).toEqual('计数翻倍：4');
+  });
+  it('store actions', async () => {
+    const increment = await page.$('.increment');
+    await increment.tap()
+    const countIn = await page.$('.count');
+    expect(await countIn.text()).toEqual('当前计数：3');
+    const doubleCountIn = await page.$('.doubleCount');
+    expect(await doubleCountIn.text()).toEqual('计数翻倍：6');
+
+    const decrement = await page.$('.decrement');
+    await decrement.tap()
+    const countDe = await page.$('.count');
+    expect(await countDe.text()).toEqual('当前计数：2');
+    const doubleCountDe = await page.$('.doubleCount');
+    expect(await doubleCountDe.text()).toEqual('计数翻倍：4');
+  });
+});

pages/template/pinia/pinia.vue

@@ -0,0 +1,32 @@
+<template>
+  <view class="uni-product">
+    <page-head title="Pinia"></page-head>
+    <text class="count">当前计数：{{ counter.count }}</text>
+    <text class="doubleCount" style="margin: 20rpx 0;">计数翻倍：{{ counter.doubleCount }}</text>
+    <button @click="incrementCounter">增加计数</button>
+    <button @click="incrementPatchCounter">使用$patch方法增加计数</button>
+    <button class="increment" @click="counter.increment">通过actions中的increment增加计数</button>
+    <button class="decrement" @click="counter.decrement">通过actions中的decrement减少计数</button>
+  </view>
+</template>
+
+<script>
+import { useCounterStore } from '@/store/counter'
+export default {
+  setup() {
+    const counter = useCounterStore()
+    function incrementCounter() {
+      counter.count++
+    }
+    function incrementPatchCounter() {
+      // 或者使用 $patch 方法
+      counter.$patch({ count: counter.count + 1 })
+    }
+    return {
+      counter,
+      incrementCounter,
+      incrementPatchCounter
+    }
+  }
+}
+</script>

store/counter.js

@@ -0,0 +1,17 @@
+import { defineStore } from 'pinia'
+export const useCounterStore = defineStore('counter', {
+  state: () => ({
+    count: 0
+  }),
+  getters: {
+    doubleCount: (state) => state.count * 2
+  },
+  actions: {
+    increment() {
+      this.count++
+    },
+    decrement() {
+      this.count--
+    }
+  }
+})