vue3.2 pinia的使用

目录

1 下载

2 引入 main.js

3 创建store --> common.js

4 vue3.2 项目中使用

5 监听state值 变化

---

1 下载

npm i pinia

2 引入 main.js

import { createApp } from "vue";
import App from "./App.vue";
const app = createApp(App);
 
// 引入pinia
import { createPinia } from "pinia";
const pinia = createPinia();
 
app.use(pinia).mount("#app");

3 创建store --> common.js

import { defineStore } from "pinia";
 
export default defineStore("commonStore", {
  state: () => {
    return {
      count: 0,
      man: "男",
      arrLove: ["花"],
      objJob: { name1: "58" },
    };
  },
  actions: {
    selMan(val) {
      this.man = val;
    },
  },
  getters: {
    countAdd(state) {
      return state.count + 10;
    },
  },
});

4 vue3.2 项目中使用

 
<script setup>
import useCommonStore from '@/store/aa.js'
import { storeToRefs } from 'pinia'
 
const store = useCommonStore()
let { man, count, countAdd, objJob } = storeToRefs(store)
console.log('===== store1', store.man)
console.log('===== store1', store.selMan)
console.log('===== store1', store.objJobe)
store.man = '哇哈'
 
store.objJob.name2 = '对象直接.添加值'
store.selMan('直接调用函数传值')
store.arrLove.push('数组直接push传值')
store.$patch(state => {
  state.arrLove.push({
    name1: '同城'
  })
})
 
// 将整个state替换
const resetState = () => {
  store.$state = {
    objJob: { 世界杯: '卡塔尔' }
  }
}
script>
 

5 监听state值 变化