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

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"吗?为什么却还显示着”小猪课堂“?????

阅读 3.4k
2 个回答

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

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

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

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

  1. store 是存在单页内存里面的,你开两个页面每个页面都是自己的 store,并且两个页签是无法直接通信的
  2. 如果想实现两个页面的同步,在不借助后端的情况下,只能考虑 前端本地缓存 方案,比如

    • Web Storage(localStorage, sessionStorage)
    • indexDB
    • cache
    • ...
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏