创建项目,安装pinia
npm init vite@latest
yarn add pinia
创建store
import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'
// 创建pinia 实例
const pinia = createPinia()
const app =createApp(App)
// 挂载到 Vue 根实例上
app.use(pinia)
app.mount('#app')
import { defineStore} from 'pinia'
export const homeStore = defineStore('home',{
state:()=>{
return {
helloWorld :'hello word'
}
},
getters:{},
actions:{}
})
参数说明
store:用来存储全局的状态的，这里边定义的，就可以是为SPA里全局的状态了,
getters属性：用来监视或者说是计算状态的变化的，有缓存的功能
actions属性：对state里数据变化的业务逻辑，需求不同，编写逻辑不同。说白了就是修改state全局状态数据的
defineStore()方法的第一个参数是创建的名称,名称必须是唯一的不能重复,第二个参数是一个对象
页面使用
<template>
<h2 class="">{{ store.helloWorld }}</h2>
</template>
<script setup>
import { homeStore } from "../store/index";
const store = homeStore ();
</script>
//或
<template>
<h2 class="">{{ helloWorld }}</h2>
</template>
<script setup>
import { storeToRefs } from "pinia";
import { homeStore } from "../store/index";
const store = homeStore();
const {helloWorld } = store //这种方式解构后数据不是响应式的
//所以官方提供了一个storeToRefs方法
const { helloWorld } = storeToRefs(store);
</script>
修改数据
在页面中定义一个button来修改页面的数据
<template>
<button @click="editStore">修改store</button>
</template>
<script setup>
import { homeStore } from "../store/index";
const store = homeStore ();
//方式一
const editStore = () => {
store.helloWorld = '你好!'
}
//方式二
const editStore = () => {
store.$patch({
helloWorld : store.helloWorld === '你好!' ? '真好' : '真不好'
});
}
//方式三,传递store对象修改数据
const editStore = () => {
store.$patch((state) =>{
state.helloWorld = store.helloWorld === '你好!' ? '真好' : '真不好'
});
}
</script>
actions使用
在store中定义好actions,方法在页面可以直接调用
actions:{
changeData(){
this.helloWorld='啦啦啦啦啦'
}
}
<template>
<button @click="changeStore">修改store</button>
</template>
<script setup>
import { homeStore } from "../store/index";
const store = homeStore ();
const changeStore= () => {
store.changeData()
}
</script>
getters使用
//getters相当于是Vue中的计算属性几乎一样,对数据进行处理,有缓存机制
getters:{
helloHidden(state){
return state.helloWorld.split(" ")
}
},
