注：大部分的东西都是官网的内容，少量观点vuex，pinia
vux的部分
- vuex的api
// 定义仓库
import { createStore } from "vuex";
const store = createStore({
// 状态树
state() {
return {
// 状态变量
count: 0
}
},
mutations: {
increment(state) {
state.count++
}
},
getters: {
// 类似于vue 的 计算属性
countTen(state) {
return state.count + 10
}
},
actions: {
incrementAction(context) {
context.commit('increment')
}
}
})
export default store
- vuex的使用
<script setup lang="ts">
import { useStore } from 'vuex'
const store = useStore()
function increment() {
store.commit('increment')
}
function incrementAction() {
store.dispatch('incrementAction')
}
</script>
<template>
<div>
count:{{store.state.count}}
countTen:{{store.getters.countTen}}
</div>
<button @click="increment">
increment
</button>
<button @click="incrementAction">
incrementAction
</button>
</template>
pinia的部分
- pinia的api
// 定义仓库
import { defineStore } from 'pinia'
const useMainStore = defineStore('main', {
state() {
return {
// 状态变量
count: 0
}
},
getters: {
countTen(state) {
return state.count + 10
}
},
actions: {
increment() {
this.count++
}
}
})
export default useMainStore
- pinia的使用
<script setup lang="ts">
import useMainStore from './store/index.js'
const mainStore = useMainStore()
function increment() {
mainStore.increment()
}
</script>
<template>
<div>
count:{{mainStore.count}}
countTen:{{mainStore.countTen}}
</div>
<button @click="increment">
increment
</button>
</template>
两者的比较
- pinia 没有 mutations，actions的使用不同，getters的使用是一致的
- pinia 没有总出口全是模块化，需要定义模块名称，当多个模块需要协作的时候需要引入多个模块，vuex是有总入口的，在使用模块的化的时候不需要引入多个模块
- pinia 在修改状态的时候不需要通过其他api，vuex需要通过commit，dispatch去修改
- 个人觉得还是pinia比较简单方便
