国内做的比较好的二手网站,企业网络推广外包,织梦网站主页文章列表调用,wordpress如何发布文件文章目录 环境设置存储读取数据【 storeToRefs】借助storeToRefs将store中的数据转为ref对象#xff0c;方便在模板中使用【getters】当state中的数据#xff0c;需要经过处理后再使用时#xff0c;可以使用getters配置【$subscribe】通过 store 的 $subscribe() 方法侦听 s… 文章目录 环境设置存储读取数据【 storeToRefs】借助storeToRefs将store中的数据转为ref对象方便在模板中使用【getters】当state中的数据需要经过处理后再使用时可以使用getters配置【$subscribe】通过 store 的 $subscribe() 方法侦听 state及其变化store组合式写法 环境设置
作用简单来说有了一个新的存储数据和方法的空间 第一步npm install pinia
第二步操作src/main.ts
import { createApp } from vue
import App from ./App.vue/* 引入createPinia用于创建pinia */
import { createPinia } from pinia/* 创建pinia */
const pinia createPinia()
const app createApp(App)/* 使用插件 */{}
app.use(pinia)
app.mount(#app)此时开发者工具中已经有了pinia选项
存储读取数据 Store是一个保存状态、业务逻辑 的实体每个组件都可以读取、写入它。 它有三个概念state、getter、action相当于组件中的 data、 computed 和 methods。 具体编码src/store/count.ts 就是有一个文件可以进行 存储数据操作数据方法
// 引入defineStore用于创建store
import {defineStore} from pinia// 定义并暴露一个store
export const useCountStore defineStore(count,{// 动作actions:{},// 状态state(){return {sum:6}},// 计算getters:{}
})具体编码src/store/talk.ts
// 引入defineStore用于创建store
import {defineStore} from pinia// 定义并暴露一个store
export const useTalkStore defineStore(talk,{// 动作actions:{},// 状态state(){return {talkList:[{id:yuysada01,content:你今天有点怪哪里怪怪好看的},{id:yuysada02,content:草莓、蓝莓、蔓越莓你想我了没},{id:yuysada03,content:心里给你留了一块地我的死心塌地}]}},// 计算getters:{}
})组件中使用state中的数据
templateh2当前求和为{{ sumStore.sum }}/h2
/templatescript setup langts nameCount// 引入对应的useXxxxxStore import {useSumStore} from /store/sum// 调用useXxxxxStore得到对应的storeconst sumStore useSumStore()
/scripttemplateulli v-fortalk in talkStore.talkList :keytalk.id{{ talk.content }}/li/ul
/templatescript setup langts nameCountimport axios from axiosimport {useTalkStore} from /store/talkconst talkStore useTalkStore()
/script【 storeToRefs】借助storeToRefs将store中的数据转为ref对象方便在模板中使用
借助storeToRefs将store中的数据转为ref对象方便在模板中使用。注意pinia提供的storeToRefs只会将数据做转换而Vue的toRefs会转换store中数据。
templatediv classcounth2当前求和为{{sum}}/h2/div
/templatescript setup langts nameCountimport { useCountStore } from /store/count/* 引入storeToRefs */import { storeToRefs } from pinia/* 得到countStore */const countStore useCountStore()/* 使用storeToRefs转换countStore随后解构 */const {sum} storeToRefs(countStore)
/script
【getters】当state中的数据需要经过处理后再使用时可以使用getters配置 概念当state中的数据需要经过处理后再使用时可以使用getters配置。 追加getters配置。
// 引入defineStore用于创建store
import {defineStore} from pinia// 定义并暴露一个store
export const useCountStore defineStore(count,{// 动作actions:{/************/},// 状态state(){return {sum:1,school:atguigu}},// 计算getters:{bigSum:(state):number state.sum *10,upperSchool():string{return this. school.toUpperCase()}}
})组件中读取数据
const {increment,decrement} countStore
let {sum,school,bigSum,upperSchool} storeToRefs(countStore)【$subscribe】通过 store 的 $subscribe() 方法侦听 state及其变化
talkStore.$subscribe((mutate,state){console.log(LoveTalk,mutate,state)localStorage.setItem(talk,JSON.stringify(talkList.value))
})store组合式写法
import {defineStore} from pinia
import axios from axios
import {nanoid} from nanoid
import {reactive} from vueexport const useTalkStore defineStore(talk,(){// talkList就是stateconst talkList reactive(JSON.parse(localStorage.getItem(talkList) as string) || [])// getATalk函数相当于actionasync function getATalk(){// 发请求下面这行的写法是连续解构赋值重命名let {data:{content:title}} await axios.get(https://api.uomg.com/api/rand.qinghua?formatjson)// 把请求回来的字符串包装成一个对象let obj {id:nanoid(),title}// 放到数组中talkList.unshift(obj)}return {talkList,getATalk}
})
