1,安装及引用
npm install pinia
安装完Pinia包之后,需要在main.js文件中导入createPinia函数并将Pinia插件于vue应用程序绑定
import { createApp } from "vue";
import App from './App.vue';
import { createPinia } from 'pinia';
const app = createApp(App);
app.use(createPinia());
app.mount('#app');
使用createPinia函数创建并初始化Pinia插件实例,将其与vue应用程序绑定使用app.use(pinia),
然后在src文件夹创建一个store文件夹,并添加store.js文件。
//store/store.js
import {defineStore} from "pinia"
const appStore = defineStore('appStore', {
state: () => ({
baseUrl: 'https://www.baidu.com/',
ipList: ['192.168.10.777', '192.168.10.999', '192.168.10.888']
}),
actions: {
changeState(params) {
console.log('接收到的参数===>', params)
this.baseUrl = params
this.ipList.push('192.168.10.100')
}
}
})
export default appStore
第一种修改方式:直接state = '数据' ,不推荐
const store = appStore()
let {baseUrl, ipList} = storeToRefs(store)
/*
* 第一种修改方式:虽然可以直接修改,但是出于代码结构来说,
* 全局的状态管理还是不要直接在各个组件处随意修改状态,
* 应放于 action 中统一方法修改(piain没有mutation)
* 并不推荐!!!
* */
function changeData() {
// baseUrl = 'https://www.taobao.com/' //error 这么写是没有用的
store.baseUrl = 'https://www.taobao.com/' //success
store.ipList.push('192.168.10.111') //success
}
第二种修改方式:使用$patch修改数据
const store = appStore()
// 第二种修改方式:使用$patch改变数据 $patch 可以同时修改多个值
function changeDataByPatch() {
/*
$patch也有两种的调用方式
第一种写法的在修改数组时,假如我只想要把 ipList 的中第2项改成‘192.168.10.222',
但是也需要传入整个包括所有元素的数组,这无疑增加了书写成本和风险,显然是不合理的,所以一般都推荐使用第二种传入一个函数的写法
* */
// 第一种 $patch方法
// store.$patch({
// baseUrl: 'https://www.jd.com/',
// ipList: ['192.168.10.777', '192.168.10.222', '192.168.10.888']
// })
// 第二种 $patch方法
store.$patch((state) => {
state.baseUrl = 'https://www.jd.com/'
state.ipList[0] = '192.168.10.222'
})
}
第三种修改方式:使用actions中的方法修改数据 (推荐)
// 第三种修改方式:调用store中的action改变数据
function changeDataByAction() {
store.changeState('https://www.alibabagroup.com/cn/global/home') //可以直接给actions里面的方法传递参数
}
以上就是使用pinia修改数据的三种方法
pinia重置数据的功能,这个操作很简单
const store = appStore()
// 重置数据
function resetData() {
store.$reset()
}
完整代码:
<template>
<div>
<strong>baseUrl:</strong>
{{ baseUrl }}
</div>
<div>
<strong>ipList:</strong>
{{ ipList }}
</div>
<div>
<button @click="changeData">直接在页面组件中改变数据</button>
<button @click="changeDataByPatch">使用$patch改变数据</button>
<button @click="changeDataByAction">使用action改变数据</button>
<button @click="resetData">重置数据</button>
</div>
</template>
<script>
import appStore from "@/store/app"
import {storeToRefs} from "pinia"
export default {
name: "Home",
setup() {
const store = appStore()
let {baseUrl, ipList} = storeToRefs(store)
/*
* 第一种修改方式:虽然可以直接修改,但是出于代码结构来说,
* 全局的状态管理还是不要直接在各个组件处随意修改状态,
* 应放于 action 中统一方法修改(piain没有mutation)
* 并不推荐!!!
* */
function changeData() {
// baseUrl = 'https://www.taobao.com/' //error 这么写是没有用的
store.baseUrl = 'https://www.taobao.com/' //success
store.ipList.push('192.168.10.111') //success
}
// 第二种修改方式:使用$patch改变数据 $patch 可以同时修改多个值
function changeDataByPatch() {
/*
$patch也有两种的调用方式
第一种写法的在修改数组时,假如我只想要把 ipList 的中第2项改成‘192.168.10.222',
但是也需要传入整个包括所有元素的数组,这无疑增加了书写成本和风险,显然是不合理的,所以一般都推荐使用第二种传入一个函数的写法
* */
// 第一种 $patch方法
// store.$patch({
// baseUrl: 'https://www.jd.com/',
// ipList: ['192.168.10.777', '192.168.10.222', '192.168.10.888']
// })
// 第二种 $patch方法
store.$patch((state) => {
state.baseUrl = 'https://www.jd.com/'
state.ipList[0] = '192.168.10.222'
})
}
// 第三种修改方式:调用store中的action改变数据
function changeDataByAction() {
store.changeState('https://www.alibabagroup.com/cn/global/home') //可以直接给actions里面的方法传递参数
}
// 重置数据
function resetData() {
store.$reset()
}
return {
baseUrl,
ipList,
changeData,
changeDataByPatch,
changeDataByAction,
resetData
}
}
}
</script>