vue3中的pinia中的值变化了其它页面的这个值不是应该也变化吗？

Question

vue3+pinia的项目，我在store里建了一个test.js文件，代码如下：

import {defineStore} from "pinia";
import indexStore from "@/stores/index";
const testStore=defineStore("testStore",{
    state:()=>{
        return{
            name:"小猪课堂",
            age:25,
            sex:'男'
        }
    }
})

export default testStore

然后分别在两个页面调用：
A页面：

import {storeToRefs} from 'pinia'
import testStore from '@/stores/test'
const testStorex=testStore()
const {name,age,sex}=storeToRefs(testStorex)

然后我把{{name}}打印到页面上.
B页面和A页面一样。
这样两个页面都显示“小猪课堂”。

然后我在A页面加一个按钮，添加点击事件：

const setX=()=>{
  testStorex.name="intrwins"
}

我把name的值改成了"intwins"那我打开B页头不也应该显示“intrwins"吗？为什么却还显示着”小猪课堂“？？？？？

Answer 1

仔细看文档，这样是不行的。你需要在 store 里定义一个 action，从里面修改 name。

const testStore = defineStore("testStore",{
  state:()=>{
    return{
      name:"小猪课堂",
      age:25,
      sex:'男'
    }
  },
  actions: {
    setName(value) {
      this.name = value;
    },
  },
});

或者你用 store.$patch({name: 'new name'}) 可能也可以，这个我没试过。

Answer 2

如果是 同时打开了两个浏览器页面 的情况，那肯定是不行的

1. store 是存在单页内存里面的，你开两个页面每个页面都是自己的 store，并且两个页签是无法直接通信的

2. 如果想实现两个页面的同步，在不借助后端的情况下，只能考虑 前端本地缓存 方案，比如

   • Web Storage(localStorage, sessionStorage)
   • indexDB
   • cache
   • ...