vue3 vuex改为pinia

Pinia 是一个新的状态管理库，它是专门为 Vue 3 设计的。相比于 Vuex，Pinia 更加轻量级、易于使用和测试。Pinia 的核心概念是 store，每个 store 都有自己的状态、操作和 getter。

在使用 Pinia 时，我们需要先创建一个 store，然后在组件中使用 `useStore` 函数来获取 store 实例。接着，我们就可以像使用 Vuex 一样来管理状态了。

下面是一个使用 Pinia 的示例：

import { defineStore } from 'pinia'

export const useCounterStore = defineStore({
  id: 'counter',
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++
    }
  },
  getters: {
    doubleCount() {
      return this.count * 2
    }
  }
})

相关问题

vue3+vuex4+pinia+typescript实现token的

实现 token 的方法，可以参考下面的代码实现：

在 `src/store` 目录下新建 `auth` 目录，用于存放认证相关的代码。

// src/store/auth/state.ts
export interface AuthState {
  token: string | null;
}

export const state: AuthState = {
  token: localStorage.getItem('token') || null,
};

// src/store/auth/mutations.ts
import { AuthState } from './state';

export const mutations = {
  setToken(state: AuthState, token: string) {
    state.token = token;
    localStorage.setItem('token', token);
  },

  clearToken(state: AuthState) {
    state.token = null;
    localStorage.removeItem('token');
  },
};

// src/store/auth/actions.ts
import { ActionContext } from 'vuex';
import { AuthState } from './state';
import { RootState } from '../root-state';

export const actions = {
  async login(context: ActionContext<AuthState, RootState>, payload: { username: string; password: string }) {
    // 发送登录请求
    const response = await fetch('/api/login', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(payload),
    });

    if (response.ok) {
      const { token } = await response.json();
      context.commit('setToken', token);
    } else {
      throw new Error('登录失败');
    }
  },

  logout(context: ActionContext<AuthState, RootState>) {
    context.commit('clearToken');
  },
};

// src/store/auth/index.ts
import { Module } from 'vuex';
import { AuthState, state } from './state';
import { mutations } from './mutations';
import { actions } from './actions';
import { RootState } from '../root-state';

export const auth: Module<AuthState, RootState> = {
  namespaced: true,
  state,
  mutations,
  actions,
};

然后，在 `src/store` 目录下新建 `index.ts` 文件，用于创建 store 实例。

// src/store/index.ts
import { createStore } from 'vuex';
import { auth } from './auth';
import { RootState } from './root-state';

export const store = createStore<RootState>({
  modules: {
    auth,
  },
});

最后，在 `main.ts` 中引入 store 实例，并在根组件中注入。

// main.ts
import { createApp } from 'vue';
import App from './App.vue';
import { store } from './store';

const app = createApp(App);
app.use(store);
app.mount('#app');

这样，就可以在组件中通过 `this.$store.state.auth.token` 访问 token 了。在登录成功后，通过 `this.$store.dispatch('auth/login', { username, password })` 更新 token；在注销时，通过 `this.$store.dispatch('auth/logout')` 清除 token。

vue3 vuex的修改

Vue 3 中的 Vuex 相对于 Vue 2 作了一些修改，主要包括以下几点：

1. store 的创建方式：在 Vue 2 中，我们通过 new Vuex.Store() 的方式来创建一个 Store 实例，而在 Vue 3 中，我们需要使用 createApp().use(store) 的方式来将 store 实例添加到 Vue 3 应用中。

2. 模块的注册方式：在 Vue 2 中，我们可以通过 modules 选项来注册 Vuex 的模块，而在 Vue 3 中，我们需要使用 createNamespacedHelpers() 函数来注册 Vuex 模块。

3. mapState 和 mapGetters 的使用方式：在 Vue 2 中，我们可以使用 mapState 和 mapGetters 函数来映射 Vuex 的 state 和 getters，而在 Vue 3 中，我们需要使用 computed 函数来实现类似的功能。

4. 使用 Proxy 实现响应式：Vue 3 中使用 Proxy 对象来实现响应式，而不再使用 Vue 2 中的 defineProperty 方法。

总之，虽然 Vuex 在 Vue 3 中进行了一些修改，但它仍然是一个非常强大的状态管理工具，可以帮助我们更好地管理前端应用程序的状态。