Pinia小结

相对于Vuex，Pinia可以在组件中修改state值，而Vuex只能根据mutations提交来修改state的值。

一、访问数据

1. 首先引入一个store

import {testStore} from './store'

2. 访问数据

{{testStore.test}}  <!--单组数据-->

const {test, test2} = storeToRefs(testStore)  // 多组数据对其解构，并对数据进行响应式代理

二、修改数据

1. 直接修改

testStore.test ++; // test=1 --> test=2

2. 根据$state进行替换

testStore.$state = {
    test: test + 1, // test=1 --> test=2
    test2: "测试" // test2="测" --> test2="测试"
}

不建议使用，如果修改要把state下所有字段一并修改，不能少任何一个。

3. 根据$patch函数进行接收数据进行修改

testStore.$patch({
    test: test + 1, // test=1 --> test=2
    test2: "测试" // test2="测" --> test2="测试"
})

这种修改方式不同于第一种，是将数据赋值后一并修改，而不是一个一个数据修改。

4. 根据$patch函数直接对state对象进行修改

testStore.$patch(state => {
    state.test ++, // test=1 --> test=2
    state.test2 = "测试", // test2="测" --> test2="测试"
    state.arr.push(3) // arr[1,2] --> arr[1,2,3]
})

这种修改方式直接根据韩剧函数进行批量修改，批量修改建议使用该方法。

5. 统一封装到action下管理

action: {
	changeTestState() {
		this.test ++, // test=1 --> test=2
   		this.test2 = "测试", // test2="测" --> test2="测试"
    	this.arr.push(3) // arr[1,2] --> arr[1,2,3]
	}
}

这种方法用于重复使用及逻辑复杂的修改方式，但要注意不能使用箭头函数会改变this指向。