electron+vue3全家桶+vite项目搭建【五】集成Pinia全局状态管理

引入

视频讲解

在vue2的体系中，vuex是官方推荐的状态管理工具，而vue3的体系中，官网同样推荐了一款状态管理工具，他就是 Pinia

Pinia官网

demo项目地址

多窗口同步问题

pinia在electron的多窗口中无法同步状态，因为每个窗口都相当于一个单独的浏览器，虽然他们可以共用一套路由，解决方案可以参考如下博客：
electron多窗口，pinia状态无法同步更新问题解决

1.引入依赖

npm install pinia

2.集成Pinia

我们在src下创建一个store目录，该目录下创建index.ts

// src\store\index.ts
import { createPinia } from 'pinia'

const pinia = createPinia()

export default pinia

然后在main.ts中导入并挂载pinia

// src\main.ts
import pinia from './store'

// ...
// 配置pinia
app.use(pinia)

3.使用pinia

我们定义一个counterStore用来演示全局状态管理功能

1.首先在store目录下创建modules目录，里面添加一个counterStore.ts

import { defineStore } from 'pinia'

// 定义一个Store，名称要保证全局唯一
export const useCounterStore = defineStore('counterStore', {

  // 全局的状态
  state: () => {
    return {
      counter: 0
    }
  },

  // Actions 相当于组件中的 methods。 它们可以使用 defineStore() 中的 actions 属性定义，并且它们非常适合定义业务逻辑：
  actions: {

    /**counter值增加1 */
    increment() {
      console.log("actions方法改变state的值");
      this.counter++
    },
  },

  // Getter 完全等同于 Store 状态的 计算值
  getters: {

    /**计算counter*2并返回 */
    doubleCounter(): number {
      return this.counter * 2
    }
  }

})

2.为了演示全局状态管理，我们分别在compoents/demo/Index.vue和Helloworld.vue中引入counterStore

• compoents/demo/Index.vue 补充代码如下

<template>
  <h1>
    这是demo页 当前计数为：{{ counterStore.counter }}
  </h1>
</template>
<script setup lang="ts">
import { useCounterStore } from '../../store/modules/counterStore'
const counterStore = useCounterStore()
</script>

• compoents/demo/Helloworld.vue
  • 这里我们直接用两个按钮的点击事件演示 直接操作state或在actions的方法中改变state总的值状态
  • 并且getters中的方法是能够当做计算属性直接使用的，可以看到我们直接使用胡子语法调用了doubelCounter

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useCounterStore } from '../store/modules/counterStore'

const counterStore = useCounterStore()

const router = useRouter()
function goBack() {
  router.back()
}

</script>

<template>
  <h1>当前的计数为：{{ counterStore.counter }}  双倍值为：{{ counterStore.doubleCounter }}</h1>
  <ul>
    <li>
      <el-button type="success" @click="goBack">返回上一页</el-button>
    </li>
    <li>
      <el-icon size="25" color="red">
        <i-ep-edit />
      </el-icon>
    </li>
    <li>
      <el-button type="warning" @click="counterStore.counter++">直接操作state去改变值</el-button>
    </li>
    <li>
      <el-button type="info" @click="counterStore.increment">increment</el-button>
    </li>
  </ul>
</template>

<style scoped></style>

4.测试效果

可以看到

• 在helloWolrd页中，我们可以直接操作state的值或使用actions的方法来全局改变state的状态
• getters中的方法相当于计算属性，我们可以直接在胡子语法【{{}}】中使用
• 当我们在helloWold页中修改了属性值后，再回到Index页，可以发现属性值仍然是改变后的，说明这是一个全局的状态