一，pinia就是Vuex，的替代工具，Vuex plus
如何将pinia引入到vue3项目中？
1.首先新建一个vue3项目 全填yes npm init vue@latest
2.安装好之后查阅官方文档
pinia使用文档
3.从而得知在项目中有俩种方式安装pinia
我的本地只有nodejs 因此我用
npm i pinia
在mian文件中导入pinia
import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'
// 导入方法createPinia
import { createPinia } from 'pinia'
// 执行方法得到实例
const pinia= createPinia()
// 把pinia实例加入到App应用中
use(pinia)
createApp(App).mount('#app')二，使用pinia实现计数器案例
在src下创建store文件夹
counter.js文件
// 导入一个方法 defineStore
import { defineStore } from "pinia";
import { ref } from "vue";
// 导出方法
export const useCounterStore=defineStore('counter',()=>{// 定义数据(state)const count =ref(0)// 定义修改数据的方法(action 同步+异步)const increment =()=>{count.value++}// 以对象的方式return供组件使用return{count,increment}
})
app.vue文件下使用
<script setup>
// 导入usecounter方法
import { useCounterStore } from '@/store/counter';
// 执行得到的store实例对象
const counterStore=useCounterStore()
console.log(counterStore);
</script><template><button @click="counterStore.increment">{{ counterStore.count }}</button>
</template><style scoped>
</style>如图，点击该按钮就会++
三，getter方法的实现
// getter定义const doubleCount = computed(() => count.value * 2 )
文件 app.vue
<button @click="counterStore.increment">{{ counterStore.count }}</button>
{{ counterStore.doubleCount }}
点击，doubleCount会同时变化
定义异步action
npm i axios
// 定义异步actionconst API_URL='http://geek.itheima.net/v1_0/channels'const list =ref([])const getList= async ()=>{const res = await axios.get(API_URL)list.value=res.data.data.channels}
<ul><li v-for="item in counterStore.list" :key="item.id">{{ item.name }}</li></ul>
四，数组解构
普通解构会丢失数据
1. 示例
直接解构
打印输出 俩个普通的值
包裹之后输出为俩个ref响应式对象
而方法可以直接解构
总结
