vuex在pinia面前不值一提!

为什么要使用 Pinia？

Pinia 最初是在 2019 年 11 月左右重新设计使用 Composition API 。从那时起，最初的原则仍然相同，但 Pinia 对 Vue 2 和 Vue 3 都有效，并且不需要您使用组合 API。 除了安装和 SSR 之外，两者的 API 都是相同的，并且这些文档针对 Vue 3，并在必要时提供有关 Vue 2 的注释，以便 Vue 2 和 Vue 3 用户可以阅读,Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。 如果您熟悉 Composition API，您可能会认为您已经可以通过一个简单的 export const state = reactive({}). 这对于单页应用程序来说是正确的，但如果它是服务器端呈现的，会使您的应用程序暴露于安全漏洞。 但即使在小型单页应用程序中，您也可以从使用 Pinia 中获得很多好处.

说不多说直接开始:

02.安装pinia

yarn add pinia
# 或者使用 npm
npm install pinia

03.pinia使用

3-1 创建 store文件夹

3-2全局main.js 配置pinia

const app = createApp(App)

#引入&使用pinia
import {createPinia} from 'pinia'
app.use(createPinia())

app.mount('#app')

3-3语法1 store/counter.js(不推荐这个写法)

/* num pinia模块 */
import {defineStore} from 'pinia'

export const useNumstore = defineStore('numstore', {
  //state数据
  state: () => {
    return {
      num: 10,
    }
  },
  //getters
  getters: {
    doubleNum(state) {
      return state.num * 2
    },
  },
  //actions
  actions: {
    //增加
    increase() {
      this.num++
    },
    //减少
    decrease() {
      this.num--
    },
  },
})

3-4语法2 hooks语法(巨推荐!!!巨好用)

/* num pinia模块 */
import {defineStore} from 'pinia'
import {ref,computed} from 'vue'
export const useNumstore = defineStore('numstore', ()=>{
    const num = ref(10)
    const doubleNum = computed(()=>num.value * 2)
    const increase = ()=>{
        num.value++
    }
    const decrease = ()=>{
         num.value--
    }
    return {
        num,
        doubleNum,
        increase,
        increase
    }
})

###3-5在vue文件中使用

<template>
  <div>
    <h3>子组件</h3>
    <p>数据num:{{ num }}</p>
    <button @click="increase">+</button>
    <button @click="decrease">-</button>
  </div>
</template>

<script setup>
//导出解构响应式函数
import {storeToRefs, computed} from 'pinia'
//引入仓库
import {useNumstore} from '../../store/modules/numStore'
//创建一个hooks 仓库实例
const $numStore = useNumstore()
//函数直接解构
const {increase, decrease} = $numStore
//数据需要响应式解构
const {num} = storeToRefs($numStore)

//获取响应式数据方法2 简单
const num  = computed(()=>$numStore.num)
</script>

本文首发于公众号【小白讲前端】，欢迎关注！！