邢台网站建设最新报价,wordpress pdf 预览,城北区工程建设信息网站,比较好的设计网站推荐Pinia#xff08;发音为/piːnjʌ/#xff0c;如英语中的“peenya”#xff09;是最接近pia#xff08;西班牙语中的菠萝#xff09;的词#xff1b;Pinia开始于大概2019年#xff0c;最初是作为一个实验为Vue重新设计状态管理#xff0c;让它用起来像组合式API#x…Pinia发音为/piːnjʌ/如英语中的“peenya”是最接近piña西班牙语中的菠萝的词Pinia开始于大概2019年最初是作为一个实验为Vue重新设计状态管理让它用起来像组合式APIComposition API。从那时到现在最初的设计原则依然是相同的并且目前同时兼容Vue2、Vue3也并不要求你使用Composition APIPinia本质上依然是一个状态管理的库用于跨组件、页面进行状态共享这点和Vuex、Redux一样和Vuex相比Pinia有很多的优势比如mutations 不再存在更友好的TypeScript支持Vuex之前对TS的支持很不友好不再有modules的嵌套结构也不再有命名空间的概念不需要记住它们的复杂关系使用Pinia安装依赖npm install pinia创建一个pinia并且将其传递给应用程序我们新建一个文件夹叫stores,后续pinia相关文件都放入这个文件夹中创建index.jsimport { createPinia } from piniaconst pinia createPinia()export default pinia在main.js中引入使用import { createApp } from vue
import App from ./App.vue
import pinia from ./storescreateApp(App).use(pinia).mount(#app)这样pinia就引入了我们的app中可以开始使用了认识Store一个 Store 如 Pinia是一个实体它会持有为绑定到你组件树的状态和业务逻辑也就是保存了全局的状态它有点像始终存在并且每个人都可以读取和写入的组件你可以在你的应用程序中定义任意数量的Store来管理你的状态Store有三个核心概念state、getters、actionsstate用来存储数据可以直接访问修改,getters类似computed,actions类似于methods,可以直接调用定义一个Store在stores文件夹下新建counter.jsimport {defineStore} from piniaexport const useCounterStore defineStore(counter, {state: () {return {count: 0,banners: [],recommends: []}},getters: {doubleCount(state) {return state.count * 2}},actions: {async fetchHomeMultidata() {const res await fetch(http://123.207.32.32:8000/home/multidata)const data await res.json()this.banners data.data.banner.listthis.recommends data.data.recommend.listreturn ok}}
})
使用store,useCounterStore是个函数调用后可以返回一个store对象里面可以直接使用state,getters和actions其中state可以直接访问和修改getters可以作为属性来使用,actions是作为方法来调用的返回promisetemplatediv classhomeh2count: {{ counterStore.count }}/h2h2count: {{ counterStore.doubleCount }}/h2button clickchangeState修改state/buttonh2轮播的数据/h2ultemplate v-foritem in counterStore.bannersli{{ item.title }}/li/template/ul/div
/templatescript setup
import {useCounterStore} from /stores/counterStore;// useCounterStore是一个函数
const counterStore useCounterStore()// actions返回的是promise
counterStore.fetchHomeMultidata().then(res {console.log(res)
})function changeState() {// state可以直接访问和修改counterStore.count
}/script
