vue3+ts+vite 问题汇总（pinia）（二）

本人githup项目地址：https://github.com/suidagang/...

1、pinia 学习

第一步（安装）：npm install pinia
第二步main.ts 引入：

//main.ts
import { createPinia } from 'pinia';
const pinia = createPinia();
app.use(pinia)

第三步: 创建store

src文件夹下创建store文件，store文件下创建index.ts

//index.ts
import { defineStore } from 'pinia';
export const mainStore = piniaStore('main', {
  state: () => {
    return {
      num: 123
    };
  },
  getters: {},
  actions: {}
});

第四步：组件中使用(获取)

import { piniaStore } from '../../store/index';
const store = piniaStore();
console.log(store.num)

获取数据用es6解构遇到的坑
这种取到的数据不是响应式的数据
const {num,count} = store;
解决办法：
import { storeToRefs } from 'pinia';
const {num,count} = storeToRefs(store);

第五步：组件中修改store数据

store.num = 234;

第六步:修改状态数据的4种方式

第一种：store.count = 345;
第二种（$patch）对象；优点：多数据修改:官方有所优化（性能问题）缺点：只能赋值，不能写逻辑

const addCount = () => {
  store.$patch({
    count: store.count + 2,
    num: store.num === '测试' ? '345' : '测试'
  });
};

第三种：（$patch）函数 优点：可以写逻辑

const addCount = () => {
  store.$patch((state) => {
    store.count++;
    state.num = store.num === '测试' ? '3452' : '测试';
  });
};

第四种：actions 需要在actions里写逻辑
组件调用

const addCount = () => {
  store.changeState();
};

第七步：getters使用（和计算属性一样）--缓存

使用 store/index.ts
getters完善
组件使用
store.getters 的方法

第八步：多个store的相互调用

store文件夹下创建另一个ts ，import相互调用，就可以直接使用

// index.ts
import { menuStore } from './menu';
actions: {
    getList() {
      return menuStore().list;
    }
  }

下一篇文章