vuex和pinia的区别

pinia:

1. 完整支持ts及ts的各种扩展
2. 完整支持composition的写法 reactive ref, function ()=>{}, computed()
3. 轻量级, 去掉vuex中复杂的功能及特性(去掉了mutations, modules), 更轻巧
4. 核心属性: state状态, action改变+异步, getters计算属性
5. 支持插件的安装, 能给pinia再次安装插件

pinia核心语法

// 5.1 定义
export const xxxstore = defineStore('storeid', () => {
        //1. 定义交互状态
                    var obj = reactive({ id: 1, name: '张三', age: 20})

        //2. 定义改变/异步 
                    var changeName = (val) => {
                        obj.name = val
                    }

        //3. 计算 
                    var newage = computed(() => {
                        return obj.age += 10
                    })

                    return {
                        obj,
                        changeName,
                        newage
                    }
})

//5.2 使用  main.ts使用pinia

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

//5.3 在组件中使用
import { xxxstore } from '刚才那个store文件路径'
import { storeToRefs } from 'pinia'

//使用storeToRefs响应式解构
const store对象 = xxxstore()

var { obj } =  storeToRefs(store对象) //获取动态数据
store对象.changeName()  //调用函数改变pinia的值
store对象.newage   //获取pinia中的计算属性

vuex:

1. 功能更完善, 相对功能学习较为复杂
2. 核心属性: state状态, mutation改变(操控state的唯一方式), action异步, getters计算属性, modules模块拆分
   vue+vuex数据流

   
   2.1 vue组件 
   dispatch(action) 

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

2.3 mutation改变数据
mutation(state){
state.xxx = xxxx
}

2.4 state发生变化,通知vue组件刷新
store.dispath() //触发一个action异步
store.commit() //触发一个mutation同步