vue3中如何使用Pinia

Pinia 是 Vue 3 中的状态管理库，类似于 Vue 2 中的 Vuex。Pinia 的最大特点是使用了 Vue 3 的新特性，比如 Composition API 和 Proxy，提供了更好的性能和开发体验。

相比之下，Vue 2 中的 Vuex 依赖于 Vue 2 的响应式系统，不支持 Composition API 和 Proxy。尽管 Vuex 可以使用 Vue 3，但是它仍然不会受益于 Vue 3 的新特性。

此外，Pinia 还提供了 TypeScript 支持的 API，比 Vuex 更加类型安全。因此，如果正在使用 Vue 3，建议使用 Pinia 作为状态管理库。

下面是vue3中使用pinia的实例代码：

定义store
import {defineStore} from "pinia";
 
export const useAlarmStore = defineStore('alarm', {
    state: () => (
        {
            message: 'hello',
            content: 'content',
            detail: 'detail',
            isFirst: 0
        }
    ),
    getters: {
        getMessage() {
            return this.message + 'con' + Math.random()
        }
    },
    actions: {
        handleMessageFun() {
            this.message = Math.random() + 'hello'
            this.content = Math.random() + 'content'
        },
        handleFirstFun() {
            this.isFirst = 1
        }
    },
    persist: {
        enabled: true,
        strategies: [
            {
                key: 'alarm',   //存储了所有变量
                storage: localStorage
                // paths: ['message', 'content', 'isFirst']
            }
            // {storage: sessionStorage, paths: ['message']},
            // {storage: localStorage, paths: ['content']}
        ]
    }
})
 
页面使用
<script>
import detail from "@/views/componetns/detail.vue";
import {computed, onBeforeUnmount, onMounted, ref} from "vue";
import {getAlarmData} from "@/api/jiankong";
import {useAlarmStore} from '@/store/modules/alarm'
import {storeToRefs} from "pinia";
 
export default {
  components: {
    detail
  },
  setup(props, context) {
    const store = userAlarmStore()
    // 获取store 中的state  属性
    // console.log(store.message)
    //（1） 获取store getters
    const showMess = computed(() => store.getMessage)
    console.log(showMess)
    // 获取store 中的方法
    function changeMessage() {
      // 获取actions 定义的方法
      store.handleMessageFun()
      // console.log(store.message)
    }
    // console.log(store.getMessage())
    // （2）store 中存储的属性值直接取出来使用就不会有响应式了，所以使用storeToRefs 就会有响应式
    const {message} = storeToRefs(store)
    // 获取store 中变量的方法  可以使用1和2两种  都可以
    
    //以上是sore 使用-------------------------------------
 
 
    let res = getAlarmData()
    let tableData = res.data
    let msg = ref('')
    let showDetail = ref(false)
    function checkDetail(row) {
      showDetail.value = true
      msg.value = {...row}
    }
    function saveEmit(value) {
      console.log(value)
    }
    // function checkPoint(event) {
    //   console.log(event.pageX)
    //   console.log(event.pageY)
    // }
    // onMounted(() => {
    //   window.addEventListener('click', checkPoint)
    // })
    // onBeforeUnmount(() => {
    //   window.removeEventListener('click', checkPoint)
    // })
    return {
      tableData,
      checkDetail,
      showDetail,
      msg,
      saveEmit,
      message,
      changeMessage,
      showMess
    }
  }
}
 
</script>
 
<template>
  <div class="table-content">
    <div @click="changeMessage">
      新增{{ message }} ---------{{ showMess }}
    </div>
    <el-table
      :data="tableData"
      stripe
      border
      style="width: 100%"
      max-height="830"
    >
      <el-table-column
        prop="psName"
        label="企业名称"
        width="180"
      />
      <el-table-column
        prop="alarmRuleName"
        label="报警名称"
        width="180"
        show-overflow-tooltip
      >
        <template #default="scope">
          {{ scope.row.psName + scope.row.alarmRuleName }}
        </template>
      </el-table-column>
      <el-table-column
        prop="content"
        label="报警内容"
      />
      <el-table-column
        prop="content"
        width="90"
        label="操作"
        align="center"
      >
        <template #default="scope">
          <el-button
            text
            type="primary"
            @click="checkDetail(scope.row)"
          >
            查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <detail
    v-if="showDetail"
    :msg="msg"
    @saveEmit="saveEmit"
  />
</template>
 
<style scoped lang="scss">
.table-content {
  margin: 15px;
  padding: 15px;
  background-color: #FFFFFF;
  border-radius: 2px;
}
</style>