Pinia与Vuex的区别
1.去掉了mutation模块
2.reset重置功能
3.store.$onAction()监听
4.不再有 modules 的嵌套结构,但可以在一个store里面调用另一个store
5.Pinia体积更小
//父组件
<template>
<div>Parent</div>
<!-- 计算属性获取:computed -->
<div>userName: {{ userName }}</div>
<!-- getters获取 -->
<div>userName: {{ store.getUserAge }}</div>
<!-- 操作 -->
<div class="bth" @click="add">点击age+1</div>
<div class="bth" @click="reset">重置age=0</div>
<div class="bth" @click="patch">批量修改</div>
<div class="bth" @click="getData">action获取数据</div>
<Child></Child>
</template>
<script>
import { useStore } from "@/store/index.js";
import { computed } from "vue";
import Child from "./child.vue";
export default {
name: "",
components: {
Child,
},
setup() {
// console.log("param: ", process)
const store = useStore();
console.log("store: ", store);
let userName = computed(() => store.userName);
// 直接调用store,修改age
function add() {
store.userAge += 1;
}
// 重置
function reset() {
store.$reset();
}
// 批量修改
function patch() {
store.$patch((state) => {
state.userName = "fff";
state.userAge = 100;
});
}
// 动态获取数据
function getData() {
store.getData();
}
// 回调函数在action之前执行,参数二false:组件卸载时,销毁该绑定
store.$onAction(callback, false);
function callback(data) {
let {
name, // action 的名字
store, // store 实例
args, // 调用这个 action 的参数
after, // 在这个 action 执行完毕之后,执行这个函数
onError, // 在这个 action 抛出异常的时候,执行这个函数
} = data;
// 记录开始的时间变量
const startTime = Date.now();
// 这将在 `store` 上的操作执行之前触发
console.log(`Start "${name}" with params [${args.join(", ")}].`);
// 如果 action 成功并且完全运行后,after 将触发。
after((result) => {
console.log(
`Finished "${name}" after ${
Date.now() - startTime
}ms.\nResult: ${result}.`
);
});
// 如果 action 抛出或返回 Promise.reject ,onError 将触发
onError((error) => {
console.warn(
`Failed "${name}" after ${
Date.now() - startTime
}ms.\nError: ${error}.`
);
});
}
return {
store,
userName,
add,
reset,
patch,
getData,
};
},
};
</script>
<style lang="less" scoped>
.bth {
display: inline-block;
padding: 10px;
border-radius: 5px;
background-color: greenyellow;
margin-right: 10px;
cursor: pointer;
}
</style>
//子组件
<template>
<div class="child">
<div style="margin-bottom: 10px">Child</div>
<div>userName: {{ userName }}</div>
<div>userName: {{ userAge }}</div>
<div class="bth" @click="add">点击age+1</div>
<div class="bth" @click="reset">重置age=0</div>
</div>
</template>
<script>
import { useStore } from "@/store/index.js";
import { computed } from "vue";
export default {
name: "",
setup() {
const store = useStore();
let userName = computed(() => store.userName);
let userAge = computed(() => store.userAge);
// 直接调用store,修改age
function add() {
store.userAge += 1;
}
// 重置
function reset() {
store.$reset();
}
return {
store,
userName,
userAge,
add,
reset
};
},
};
</script>
<style lang="less" scoped>
.child {
border: solid 1px greenyellow;
border-radius: 5px;
padding: 10px;
margin-top: 50px;
}
.bth {
display: inline-block;
padding: 10px;
border-radius: 5px;
background-color: greenyellow;
margin-right: 10px;
cursor: pointer;
}
</style>