import {defineStore} from "pinia"
const appStore = defineStore('appStore', {
state: () => ({
baseUrl: 'https://www.baidu.com/',
}),
actions: {
changeState(params) {
console.log('接收到的参数===>', params)
this.baseUrl = params
}
}
})
export default appStore
修改方式:直接state = '数据' ,不推荐
const store = appStore()
let {baseUrl} = storeToRefs(store)
/*
* 第一种修改方式:虽然可以直接修改,但是出于代码结构来说,
* 全局的状态管理还是不要直接在各个组件处随意修改状态,
* 应放于 action 中统一方法修改(piain没有mutation)
* 并不推荐!!!
* */
function changeData() {
// baseUrl = 'https://www.taobao.com/' //error 这么写是没有用的
store.baseUrl = 'https://www.taobao.com/' //success
}
修改方式:使用$patch修改数据
const store = appStore()
// 第二种修改方式:使用$patch改变数据 $patch 可以同时修改多个值
function changeDataByPatch() {
/*
$patch也有两种的调用方式
第一种写法的在修改数组时,假如我只想要把 ipList 的中第2项改成‘192.168.10.222',
但是也需要传入整个包括所有元素的数组,这无疑增加了书写成本和风险,显然是不合理的,所以一般都推荐使用第二种传入一个函数的写法
* */
// 第二种 $patch方法
store.$patch((state) => {
state.baseUrl = 'https://www.jd.com/'
})
}
修改方式:使用actions中的方法修改数据 (推荐)
// 第三种修改方式:调用store中的action改变数据
function changeDataByAction() {
store.changeState('https://www.alibabagroup.com/cn/global/home') //可以直接给actions里面的方法传递参数
}