还在用vuex吗，pinia(菠萝头)才香

Posted 2022-02-17 别欺负我一个刚毕业的，前端老同志

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了还在用vuex吗，pinia(菠萝头)才香相关的知识，希望对你有一定的参考价值。

1. 什么是pinia

通俗的讲：
① vuex精简版，而且vue官方更加推荐使用。
②优势又完胜于vuex ，下面我们来了解下pinia。

2.优势

pina	vuex
pinia 同时支持vue2和vue3	vue2要用vuex 3 版本 vue3要用vuex 4 版本
不分同步异步，更好的ts支持	分同步异步，不太兼容ts
享受自动补全 …	需要注入，导入函数，调用他们 …

3. 使用（非常简单）

① 安装

npm install pinia

②在 main.js 中加入

import  createApp  from 'vue'
import App from './App.vue'

import  createPinia  from 'pinia'  //导入pinia
const  pinia = createPinia();        //调用创建pinia

createApp(App)
			.use(pinia)
			.mount('#app')

③去创建 pinia 仓库
一般选在 /src下的 store 文件夹下例：创建为 pinia.js
/src/store/pinia.js 为：

import  defineStore  from 'pinia'

export const PiniaStore = defineStore('main',  //导出 pinia仓库
    state:() =>  //相当于全局的 data()
        return 
            name:'张三',
            age:18
        
    ,
    getters:,  //相当于全局的computed
    actions:   //相当于全局methods
)

③使用（非常容易）
以/src/view/index.vue 为例：
Vue3写法：

<template>
    <h3>pinia.name</h3>  <!--使用-->
    <h3>pinia.age</h3>
    <button @click="pinia.age++">修改pinia数据</button>   <!--修改-->
</template>
<script setup>
    import  PiniaStore  from '../../store/pinia'
    const pinia = PiniaStore();
</script>

Vue2写法：

<template>
	<div>
       <h3>pinia.name</h3>
       <h3>pinia.age</h3>
       <button @click="pinia.age++">修改pinia数据</button>
    </div>
</template>
<script>
    import  PiniaStore  from '../../store/pinia'
    export default 
			created()const pinia = PiniaStore();
	
</script>