Vuex与Pinia归纳总结

Vuex与Pnia归纳总结

pinia

1. 完整支持ts及ts的各种拓展
2. 完整支持组合式API写法（reactive，ref，function，()=>）
3. 轻量级，去掉vuex中复杂的功能及特性（去掉了mutations，modules），更加轻巧
4. 核心属性：state 属性、action 改变+异步、getters 计算属性
5. 支持插件的安装，能给pinia再次安装插件

核心语法：

export const xxxstore = defineStore('storeMain',()=>{

// 定义交互状态
let num = ref(0)

// 定义改变/异步
let changeNum = （val）=>{
    num.value = val
}

// 计算属性
let newNum = coputed(()=>{
    return num.val += 1
})

return{
num,
changeNum,
newNum
}
})

使用pinia：

main.ts中使用pinia

import {createPinia} from 'pinia'
app.use(createPinia())

在组件中使用

import {xxxstore} from 'store文件路径'
import {storeToRefs} from 'pinia'
// 使用storeToRefs响应式结构
const store对象 = xxxstore()

let {num} = storeToRefs(store对象) // 获取动态数据
store对象.changeNum() //调用函数改变pinia的值
store对象.newNum  //获取pania中的计算属性

vuex

功能更完善，相对功能学习较为复杂
核心属性：state 状态、mutation 改变（操作state的唯一方式）、action 异步、getters 计算属性 、modules 模块拆分

vue+vuex数据流

vue组件

dispatch(action)
action中执行异步, 把获取到的结果提交给mutation

context.commit(mutation)

mutation改变数据

mutation(state){
state.xxx = xxxx
}

state发生变化,通知vue组件刷新

store.dispath() //触发一个action异步
store.commit() //触发一个mutation同步