pinia简介和setup语法糖

pinia简介和setup语法糖

1.pinia的基本特点

pinia同样是一个Vue 状态管理工具，它和vuex有很多相似的地方。本质上他是vuex团队核心成员开发的，在vuex上面提出了一些改进。与vuex相比，pinia去除了vuex中对于同步函数Mutations和异步函数Actions的区分。直接在Actions中便能够使用同步和异步方法（在vuex的开发计划中也将会除去同步和异步的区分）。其次相比于vuex，pinia对于typescript的支持性更好，友好的devTools支持，pinia只有1kb，简化了很多方法的写法。由于vuex比较完善，因此,pinia更加适合小型项目，vuex更加适合大型项目。

2.基本配置和使用

//利用vue-cli创建一个pinia项目（这里选择创建vue3项目）
vue create pinia
//在项目中安装pinia
npm install pinia@next

项目中导入pinia

import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'
//需要注意的是从pinia中结构出来的createPinia是一个函数,挂载需要先调用执行
createApp(App).use(createPinia()).mount('#app')

配置状态管理专用文件，在根目录下创建一个store文件，并新建一个index.js文件

import {defineStore} from 'pinia';
export  const userTestStore = defineStore({//需要注意的是，defineStore返回的是一个回调方法
    id:'test',//test是该状态管理的唯一标志也可以使用defineStore(id,{});的形式
    state(){
     return {
         name:'hello pinia',
         age:20
     }       
    },
    getters:{
        testGetters(){
            return this.name+'...';//直接利用this便能够获取到里面的内容不需要使用state中间对象
        } 
    },
    actions:()=>{
        addAge:function(){
                setInterval(()=>{
                this.age++;
            },1000)
        }
    }
})

在组件中引用状态管理变量

从上图可以看出，获取参数的方法被简化了。

3.pinia传参与调用

下面给出调用store里面的带参方法例子：

//在状态管理工具中定义addAge函数
actions:{
      addAge(gap){
           this.age+=gap;
      }
 }


//组件中导入对应状态管理工具
import { userTestStore } from "./store";
const store = userTestStore();
const { addAge } = store;//解构出store实例里面的addAge方法

组件中使用方法如下：

output age:{{ store.age }}
click for add age

需要注意的是，在官网中有这么一句话：

直接修改解构出来的 age是不ref类型，给出如下的错误案例：

  
error:{{ age }}
  change error age


let { age } = store;
function test() {
  console.log(" error add age");
  age++;
}

解决方法，使用pinia里面的storeToRefs强转：

import { storeToRefs } from "pinia";
let { age } = storeToRefs(userTestStore());
function test() {
  age.value++;//注意这里要加上.value因为被转化成了ref类型
}
//这样就能够是实现有效修改了

4.setup语法糖

接下来说一下vue3中中setup语法糖的基本使用方式。语法糖主要是为了简化代码的书写方式，只要知道怎么用就行，实际编译时，编译器会自动转化成大多数基础开发者用的那种写法进行编译。给出如下使用例子：

整体上，就是不需要通过export导出，setup挂载之后会自动帮你导出。

（2）组件的引入和导出，直接使用import 导入对应的组件就能够直接使用了，给出如下例子：

（3）自定义属性

import { defineProps} from "vue";
let props = defineProps({
  text: String
});

但是我们发现，官方并没有提供对应的默认值设置方式，通过查阅发现，默认值的设置可以利用withDefaults这一宏命令来实现，其使用方法如下：

需要注意很重要的一点，这里不要使用 vue-cli 来创建项目，经过我反复鞭尸，发现vue-cli中使用的vue create "项目名"创建的项目对于lang=ts的声明不支持，会报两个loader没有加载等一系列错误，反正就是会导致项目运行不起来。解决方法是通过vite脚手架来安装项目：

//安装初始化的vue3项目
yarn create @vitejs/app my-vue-app --template vue
//加载依赖
yarn

最终得到的效果是能够使用默认值，补充一些typescript的新型用法：

const props = withDefaults(
  defineProps<{
    text?:string;//表示text为可选参数，这个时候也就是说下面的default将失效
  }>(),
  {
    text: "default Data",
  }
);


//利用接口声明类型
interface testType {
  name: string;
  age: number;
}
const props = withDefaults(
  defineProps<{
    text: testType;
  }>(),
  {
    text: {
      name: "flying_dark_feather",
      age: 20,
    },
  }
);
//但是在使用的时候需要利用传参的形式传递实际数据，否则会被识别成字符串而报错

（3）setup子组件触发父组件中的函数

子组件书写对应的函数体：

父组件接受对应的函数体：

```javascript
//获取组件信息可以使用如下两种方式
//vue2
 mounted: function () {
    console.log("输出数据", this.$refs.testRef);
    //testRef等价为一个名字,每个ref对应一个实例化的dom对象
  },
//vue3 setup获取（这里指的是获取不是导出）

看到上面的两种获取方式，我的确懵了，最后找到了答案：

如果ref属性加在普通元素上，那么this.$refs.name则指向该DOM元素

如果ref属性加在组件上，那么this.$refs.name指向该组件实例

通过打印两个testRef发现两个表示的其实并不是一个东西

给出解释：之所以加上testRef主要是考虑到运行前的检测，自我感觉这个解释不太专业

通过使用setup定义组件，导致里面定义的变量和函数在父组件中无法获取。解决方法：使用defineEmit定义导出：

defineExpose({//defineExpose同样是宏定义，不需要导入
  count,
  handle,
});

补充说明：不建议直接利用ref修改数据，性能上不是很友好。

（5）useSlots追踪父组件中定义的插槽内容（需要导入）

（6）useAttrs获取父组件中定义的属性

当然，获取了父组件的属性还是用处不是很大，因为一个组件一般父组件的内容子组件还是知道的。

参考文献

（1）Vue3.2 新特性详解

（2）Vue3.2 新特性详解及其视频教程

Color.value = “red”;
}

### 参考文献

[（1）Vue3.2 新特性详解](https://blog.csdn.net/qq_41800366/article/details/120091329?utm_source=app&app_version=4.17.2&code=app_1562916241&uLinkId=usr1mkqgl919blen)

[（2）Vue3.2 新特性详解及其视频教程](https://blog.csdn.net/qq_41800366/article/details/120091329?utm_source=app&app_version=4.17.2&code=app_1562916241&uLinkId=usr1mkqgl919blen)