vue3 vuex 和 pinia 踩坑日记

安装使用

安装 vuex

• npm install vuex@next --save
• cnpm install vuex@next --save-
• yarn add vuex@next --save

安装 pinia

• npm install pinia@next
• cnpm install pinia@next
• yarn add pinia@next

装完直接根据下面的写法来用就行了，只要你会用 vuex，你就等于你会用 pinia 的基本用法了，这边不展示 pinia 的插件写法

简单对比写法差异与共同点

vuex 和 pinia 是同团队成员编写，但是 pinia 写法上更加人性化，也更简单

vuex在vue3中的写法和用法

// store.js
import { createStore } from 'vuex'

export default createStore({
    // 定义数据
    state: { a:1 },
    // 定义方法
    mutations: {
        xxx(state,number){
            state.a = number
        }
    },
    // 异步方法
    actions: { },
    // 获取数据
    getters: { getA:state => state.a }
})

// 在vue3中使用
<template>
    <div>
        {{number}}
        <button @click="clickHandle">按钮</button>
    </div>
</template>
<script>
import {useStore} from "vuex"
export default {
    setup(){
        let store = useStore()
        // ⭐⭐⭐ 如果直接取state的值必须使用computed才能实现数据的响应式 如果直接取 store.state.a 则不会监听到数据的变化，或者使用getter，就可以不使用computed
        let number = computed(()=>store.state.a)
        const clickHandle = () => {
            store.commit("xxx","100")
        }
        return{number,clickHandle}
    }
}
<script>

pinia在vue3中的写法和用法

// store.js
import { defineStore } from 'pinia'

// defineStore 调用后返回一个函数，调用该函数获得 Store 实体
export const GlobalStore = defineStore({
  // id: 必须的，在所有 Store 中唯一
  id: "myGlobalState",
  // state: 返回对象的函数
  state: () => ({
    a: 1,
  }),
  getters: {},
  actions: {
    setXXX(number) {
      this.a = number;
    },
  },
});

// 在vue3中使用
<template>
    <div>
        {{number}}
        <button @click="clickHandle">按钮</button>
    </div>
</template>
<script>
import {GlobalStore} from "@/store/store.js"
export default {
    setup(){
        let store = GlobalStore();
        // ⭐⭐⭐ 如果直接取state的值必须使用computed才能实现数据的响应式 如果直接取 store.state.a 则不会监听到数据的变化，或者使用getter，就可以不使用computed (这边和vuex是一样的)
        let number = computed(()=>store.a)
        const clickHandle = () => {
            store.setXXX("100")
        }
        return{number,clickHandle}
    }
}
<script>

由此两个代码的对比我们可以看出使用 pinia 更加的简洁，轻便。pinia 取消了原有的 mutations，合并成了 actions，且我们在取值的时候可以直接点到那个值，而不需要在.state，方法也是如此。