Vue3中使用Pinia

1. Pinia官网地址: https://pinia.web3doc.top/

2. Pinia简介：

   Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。

3. 为啥不用Vuex而用Pinia：

   1、Pinia 性能优于 Vuex。
   2、Pinia 完美支持 TypeScript，Vuex 在这方面做得不是很好。
   3、Pinia 对开发工具支持很好
   4、Pinia 对调试工具（vue–devtools）也支持得很好。
   5、不需要再使用名称空间来控制 store，也不需要再考虑 store 的嵌套问题。
   6、Pinia 没有mutations，相应的工作都在actions中完成，而且actions直接支持异步函数。

4. Pinia的安装：

   npm install pinia -D

   yarn add pinia -D

5. 在入口文件中将pinia挂载到Vue上面

import App from "./App.vue";
import { createPinia } from "pinia";

createApp(App).use(createPinia()).mount("#app");

7. 在srcstore目录下面创建useXxxStore.ts文件

import { defineStore } from 'pinia'

// useXxxStore 可以是 useUserStore、useCartStore 之类的任何东西,这个名称随意
// 第一个参数是应用程序中 store 的唯一 id，切记不要与其他的重复
// 这是Option Stores写法：defineStore(name,object)
export const useXxxStore = defineStore('xxx', {
  state: () => ({ count: 0, name: 'Eduardo' }),
  getters: {
    doubleCount: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++
    },
  },
})
// 这是Setup Stores写法：defineStore(name,function)
export const useXxxStore = defineStore('xxx', {
  const count = ref(0)
  const name = ref('Eduardo')
  const doubleCount = computed(() => count.value * 2)
  function increment() {
    count.value++
  }

  return { count, name, doubleCount, increment }
})
/*
在这个文件中，我们通过 export 暴露了一个 useXxxStore 方法，
这个方法是通过 Pinia 的defineStore方法创建的，
在 Vue 业务组件中执行这个函数实例才会得到真正的 Store。
*/

9. 在其他文件中使用pinia

import { useStore } from '@/store/useXxxStore'
// 在setup()中使用
export default {
  setup() {
    const store = useStore()
	// const { name, doubleCount } = store
	//这不起作用，因为它会破坏响应式
    return {
      // 您可以返回整个 store 实例以在模板中使用它
      store,
      // 这将是响应式的
      doubleValue: computed(() => store.doubleCount),
    }
  },
}
// 在setup语法糖中使用
let store = useChatStore();
const doubleValue = computed(() => store.doubleCount);
onMounted(()=>{
	store.increment()
	//在当前组件渲染完成后，我们调用了store对象的increment方法，进行了count++操作
	// 实际上我们在组件渲染完成时，还可以通过如下代码来count++：
	//store.$patch((v) => (v.count++));
})
/*
store 对象是通过useXxxStore方法获取的，
useXxxStore方法就是我们前面介绍的useXxxStore.ts导出的方法。
得到 store 对象之后，可以直接使用store获取 Store 对象里的数据。
*/

注意：store不能使用解构语法进行操作，因为这会破坏响应式

在模板中使用store

<template>
  <div class="ChatList">
    <div class="ListBox">
      {{store.name }}:{{store.count }}
    </div>
    <div class="ListBox">
      doubleValue :{{store.doubleValue }}
    </div>
  </div>
</template>

10. 如何订阅 Store

import { useChatStore } from "@/store/useXxxStore";
let store = useXxxStore();
//订阅Store内数据的变化
store.$subscribe((mutations, state) => {
  console.log("count",state.count)
});
/*
在上面代码中我们使用store对象的$subscribe方法订阅了数据变更事件，
无论什么时候 store 内的数据发生了变化，都会执行我们为$subscribe方法提供的回调函数。

无论是通过increment()方法更新数据，还是通过$patch方法更新数据，都会触发订阅事件。


*/

订阅回调函数有两个参数 ，第一个是 mutations 参数，这个参数的events属性携带着变更前的值和变更后的值，但这个属性只有在开发环境下存在，生产环境下不存在。订阅的第二个参数是 state，这个参数包含 store 中的数据。

以这种方式更新 store 里的数据，不利于复用数据更新的逻辑，接下来我就介绍可以复用数据更新逻辑的方案。

11. 如何进行store 的互访
    在srcstore目录下面创建useYyyStore.ts文件

import { defineStore } from 'pinia'
export const useYyyStore = defineStore('yyy', {
  const count2 = ref(0)
  let initData = (chat) => {
    let result = chat.name + chat.count;
    data.value = result;
  };
  return { data, initData };
})

我们完全可以在increment方法内使用useYyyStore提供的方法。

import { useYyyStore} from "./useYyyStore";
export const useXxxStore= defineStore("xxx", () => {
  const count = ref(0)
  const name = ref('Eduardo')
  const doubleCount = computed(() => count.value * 2)
  function increment() {
    count.value++;
    let yyyStore= useYyyStore(); //新增的行
    yyyStore.initData({name,count}); //新增的行
  }

  return { count, name, doubleCount, increment }
});

代码007普通

打赏 收藏 海报 链接