vue3+ts项目使用状态管理器pinia

pinia优点

　　更好的支持ts，代码更简洁

　　省去了mutations，简化状态管理器

　　不需要嵌套代码，符合vue3的composition API，可实现代码自动分割

　　pina的store不需要主入口

安装引入

• 命令行安装

npm install pinia

• 在main.ts中引入

...
import {createPinia} from 'pinia'
const pinia=createPinia()

createApp(App).use(router).use(pinia).mount('#app')

使用

• 在页面中访问或修改state

　　1.定义一个用户的store文件src/store/user.ts

import { defineStore } from "pinia";

const storeUser = defineStore('user', {
  state: () => ({
    username: "nicoz",
    age: 10
  }),
  getters:{},
  actions:{}
})

export default storeUser

　　2-1.直接解构，只能实现简单访问

　...

　import storeUser from "../../store/user";

let { username, age } = storeUser();
console.log("username", username);
//or
const userStore=storeUser()
console.log(userStore.userInfo)

　　2-2.使用storeToRefs解构，使其成为响应式数据（store 是一个 reactive 响应式对象，通过storeToRefs会对其每个对象创建refs）

...
import { storeToRefs } from "pinia";

const userStore=storeUser()
let {username,age}=storeToRefs(userStore)

function growUp() {
  userStore.age++
  // or:age.value++
}

• 在页面中访问getter

　　1.在src/store/user.js中定义（motherAge为当前文件中state直接加上22，brotherAge为使用页面传参过来结合当前页面state）

getters:{
    motherAge:(state)=>{return state.age+22
    },
    brotherAge:(state)=>{
      return (num:number)=>{return state.age+num}
    }
  },

　　2.在页面中访问

...

<p>获取pinia中的用户妈妈年龄(比用户大22岁)：{{ motherAge }}</p>
<p>获取pinia中的用户哥哥年龄(比用户大自定义岁)：{{ userStore.brotherAge(2) }}</p>

...

const userStore=storeUser()
let {username,age,motherAge}=storeToRefs(userStore)

• 在页面中使用action（修改逻辑较多的时候建议使用action去修改state的值）

　　1.在src/store/user.js中定义

actions:{
    growSomeYears(years:number){
      console.log('growSomeYears',years)
      this.age=this.age+years
    }
  }

　　2.在页面中使用

...
<button @click="changeYears">过三年</button>
...
function changeYears(){
  userStore.growSomeYears(3)
}

• 在页面中修改state（除了上面示例中已有的直接操作值以及通过actions去操作值之外，还可通过$patch去操作修改值）

<button @click="changeNameAndAge">改名字与年龄</button>
...
function changeNameAndAge(){
  // userStore.$patch({username:'nini',age:20})
  //or 建议使用下面方法去修改多个state中的数据
  userStore.$patch(state=>{
    state.username="nini"
    state.age=21
  })
}