vuex4.x迁移到pinia

vuex迁移pina

由于公司vue2.x的老项目升级到了vue3，同步记录下vuex4.x升级迁移到pinia

1、什么是pinia

Pinia 是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态。

2、与 Vuex 的比较

与 Vuex 相比，Pinia 提供了一个更简单的 API，具有更少的规范，提供了 Composition-API 风格的 API，最重要的是，在与 TypeScript 一起使用时具有可靠的类型推断支持。

pinia 与 Vuex 4.x、3.x 不同点：

• mutations 不再存在。
• TS 支持，并且 API 的设计方式尽可能利用 TS 类型推断。
• 不再需要注入、导入函数、调用函数。
• 无需动态添加 Store，默认情况下它们都是动态的。
• 不再有 modules 的嵌套结构。
• 没有命名空间模块。

3、为什么要使用 Pinia？

• dev-tools 支持

  • 跟踪动作、突变的时间线
  • Store 出现在使用它们的组件中
  • time travel 和 更容易的调试

• 热模块更换

  • 在不重新加载页面的情况下修改您的 Store
  • 在开发时保持任何现有状态

• 插件：使用插件扩展 Pinia 功能

• 为 JS 用户提供适当的 TypeScript 支持或 autocompletion

• 服务器端渲染支持

4、vuex & pinia 目录结构对比

# Vuex, namespaced modules
src
└── store
    ├── index.js           # 初始化Vuex, 需导入模块
    └── modules
        ├── module1.js     # 'module1' namespace
        └── user
            ├── index.js   # 'user' namespace, imports module2 & module3
            ├── module2.js # 'user/module2' namespace
            └── module3.js # 'user/module3' namespace

# Pinia, id 等同于 namespaces
src
└── stores
    ├── index.js          # 初始化Pinia, 可不导入模块
    ├── module1.js        # id: 'module1'
    ├── user-module2.js   # id: 'user/module3'
    ├── user-module3.js   # id: 'user/module2'
    └── user.js           # id: 'user'

5、安装

yarn add pinia

# 或者使用 npm

npm install pinia

6、vuex & pinia 注册对比

项目入口文件 index.ts 或 main.ts 中

vuex 注册

import { createStore } from 'vuex'
const store = createStore({
  state () {},
  getters: {},
  mutations: {},
  actions: {}
})
app.use(store)

pinia 注册

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

7、 vuex & pinia 定义对比

1、vuex 中定义一个store (user.js)

export const userModule = {
    state: {
        token: ''
    },
    getters: {
        getToken(state) {
            return state.token
        }
    },
    mutations: {
        SET_TOKEN: (state, token) => {
            state.token = token
        }
    },
    actions: {
        setToken({ commit }, token) {
            commit('SET_TOKEN', token)
        }
    }
}

2、pinia 中定义一个store (user.js)

import { defineStore } from 'pinia'
export const useUserStore = defineStore({
    id: 'user',
    state: () => ({
        token: ''
    }),
    getters: {
        getToken(state) {
            return state.token
        }
    },
    actions: {
        setToken(token) {
            this.token = token
        }
    }
})

8、vuex & pinia 使用对比

1、vuex 用法

<script>
    import { mapActions } from 'vuex'
    export default {
        methods: {
            ...mapActions(['setToken']),
            test() {
                this.$store.dispatch('setToken', '1234')
            }
        }
    }
</script>

2、pinia 用法

<script>
    import { useUserStore } from '@rootCommon/store'
    export default {
        setup() {
            const userStore = useUserStore()
            return { userStore }
        },
        methods: {
            test() {
                this.userStore.setToken('1234')
            }
        }
    }
</script>

或者

<script setup>
    import { useUserStore } from '@rootCommon/store'
    const userStore = useUserStore()
    const test = () => {
        userStore.setToken('1234')
    }
</script>

9、移除 Vuex

以上都改成pinia后，移除 Vuex。

# 删除 package.json 中的vuex包依赖。
yarn remove vuex
或
npm uninstall vuex

结束

vuex 迁移到 pinia 相对比较简单。使用上也简单化了，特别是去除了mutations，很清爽。