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方法

组件中使用方法如下：

<div>output age:{{ store.age }}</div>
<button @click="addAge(10)">click for add age</button>

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

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

  <div>error:{{ age }}</div>
  <button @click="test">change error age</button>

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语法糖的基本使用方式。语法糖主要是为了简化代码的书写方式，只要知道怎么用就行，实际编译时，编译器会自动转化成大多数基础开发者用的那种写法进行编译。给出如下使用例子：

<template>
  <div>{{ name1 }}</div>
  <div @click="test">
    <div>nickname:{{ user.username }}</div>
    <div>age:{{ user.age }}</div>
    <div>{{ data }}</div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
const name1 = "hello world";
let data = ref("default"); //ref使用方法
const user = reactive({ //reactive使用方法
  username: "name",
  age: 18,
});
function test() {
  user.name += "...";
  data.value = "new data";//注意不要忘了ref操作数据的特点
}
</script>

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

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

<!--components目录下新建一个msg.vue组件-->
<template>
  <div>
    {{ msg }}
  </div>
</template>
<script setup>
  let msg = "hello!"
</script>

<!--App.vue组件中使用msg组件-->
<template>
  <msg />
</template>
<script setup>
import msg from "@/components/msg.vue";
</script>

（3）自定义属性

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

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

<script setup lang="ts">
//defineProps, withDefaults两个都是宏命令，不需要进行手动导入
const props = withDefaults(
  defineProps<{
    text: string;
  }>(),
  {
    text: "default Data",
  }
);
</script>

需要注意很重要的一点，这里不要使用 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子组件触发父组件中的函数

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

<template>
  <div @click="test">这是info组件</div>
</template>

<script setup>
//触发的组件需要使用defineEmits进行声明，返回一个函数（event,...args），该函数的第一个参数为事件名,其他参数为
//传递给第一个事件函数的参数
const emits = defineEmits(["handleClick", "handleChange"]);
function test() {
  emits("handleClick", "来自子组件的参数");
}
</script>

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

<template>
  <info @handleClick="test" />
</template>

<script setup>
import info from "./components/info.vue";
function test(res) {
  console.log("点击事件被触发,子组件传递参数：", res);
}
</script>

<info @handleClick=“test” />

```javascript
//获取组件信息可以使用如下两种方式
//vue2
 mounted: function () {
    console.log("输出数据", this.$refs.testRef);
    //testRef等价为一个名字,每个ref对应一个实例化的dom对象
  },
//vue3 setup获取（这里指的是获取不是导出）
<script setup>
import info from "./components/info.vue";
import { onMounted, ref } from "vue";
const testRef = ref(null);//主要是为了防止未定义报错
onMounted(() => {
    //直接拿到节点里面的testRef属性，也即自定义组件的实例
  console.log("输出数据：", testRef.value);
});
console.log("testRef",testRef.value);//实实在在的ref变量
</script>

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

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

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

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

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

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

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

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

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

<!--父组件-->
<template>
  <info>
    <template #header><div>这是header数据</div></template>
    <!--或者v-slot:header-->
    <template #footer><div>这是footer数据</div></template>
  </info>
</template>

<!--子组件-->
<template>
  <div>这是info组件</div>
  <slot name="header" />
  <slot name="footer" />
</template>
<script setup lang="ts">
import { onMounted, useSlots } from "@vue/runtime-core";
const slots = useSlots();//调用useSlots函数获取父组件中填充的slots内容
onMounted(() => {
  console.log("输出插槽内容：", slots);
});
</script>

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

<!--父组件-->
<info attr="test"></info>
<!--子组件-->
<script setup lang="ts">
import { onMounted, useAttrs, useSlots } from "@vue/runtime-core";
const getAttr = useAttrs();
onMounted(() => {
  console.log("输出attr:", getAttr);//获取父组件的属性
});
</script>

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

<template>
  <div class="test-div" @click="clickFun">这是info组件</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
let setColor = ref("pink");
function clickFun() {
  setColor.value = "red";
}
</script>
<style>
.test-div {
  color: v-bind(setColor);
}
</style>

参考文献

（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)