Vue3中使用Pinia_代码007(未授权)

本文介绍: 订阅回调函数有两个参数，第一个是 mutations 参数，这个参数的events 属性携带着变更前的值和变更后的值，但这个属性只有在开发环境下存在，生产环境下不存在。订阅的第二个参数是 state，这个参数包含 store 中的数据。6、Pini a 没有 mutations，相应的工作都在actions中完成，而且actions直接支持异步函数。以这种方式更新 store 里的数据，不利于复用数据更新的逻辑，接下来我就介绍可以复用数据更新逻辑的方案。1、Pini a 性能优于 Vue x。


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

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


import { defineStore } from 'pinia'

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

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


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

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

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

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


*/

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 };
})

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 }
});