用实例解析关于 vue3 setup store 的用法 - Web前端

在Vue 3中，setup是一个新的组件选项，它让我们可以使用组合式API来编写组件逻辑，而store呢，通常指的是vuex或者Pinia这样的状态管理库在vue项目里用来集中管理应用状态的地方啦，所以vue3 setup store简单来说，就是在采用setup函数编写组件逻辑的Vue 3组件中，如何更好地去使用状态管理库来处理和共享数据哦。

比如说,我们有个电商应用，很多组件都可能需要知道当前用户购物车里的商品信息呀，这个购物车数据的存储和在各个组件间的共享、更新等操作，就可以通过合适的store结合Setup来处理呢。

Vuex在Vue3 Setup里怎么用呀？

首先呢,得像往常一样安装和配置Vuex哦，安装好之后呀，在组件的setup函数里这样来使用它的store。

假设我们已经创建好了VUEx的store实例,并且有个叫做 cart 的模块，里面存着购物车相关的状态，像商品列表呀、总价这些信息。

在组件的setup函数里,我们可以通过 useStore 函数来获取到这个store实例哦，就像这样：

import { useStore } from 'Vuex';
Export default {
  setup() {
    const store = useStore();
    // 现在就可以通过store来访问Vuex里的状态和触发 mutations、actions啦
    const cartItems = store.state.cart.items;
    const addToCart = () => {
      // 假设这里有个添加商品到购物车的action
      store.dispatch('cart/addToCart', somePRoduct);
    };
    return {
      cartItems,
      addToCart
    };
  }
};

这样,我们就在setup函数里成功获取到了Vuex的store，并且可以方便地使用里面的状态以及触发相应的操作啦，然后把需要在模板里用的数据或者函数通过 return 返回出去，模板里就能直接用咯。

那Pinia在vue3 setup里又是咋用的呢？

Pinia可是Vue 3里很受欢迎的状态管理库哦，它用起来也挺方便的呢。

第一步同样是安装Pinia啦,安装好后在mAIn.JS（或者你的入口文件）里创建Pinia实例并挂载到Vue应用上，就像这样：

import { createAPP } from 'vue';
import { createPinia } from 'pinia';
import app from './app.vue';
const pinia = createPinia();
const App = createApp(App);
app.use(pinia);
app.mount('#app');

然后在组件的setup函数里使用Pinia就更简洁啦,假设我们在Pinia里创建了一个叫做 UserStore 的store，用来管理用户相关的信息，比如用户名、登录状态这些。

在组件的setup函数里可以这么写：

import { useStore } from 'pinia';
export default {
  setup() {
    const userStore = useStore('userStore');
    const username = userStore.username;
    const isLoggedIn = userStore.isLoggedIn;
    const login = () => {
      // 假设这里有个登录的action
      userStore.login(someCredentials);
    };
    return {
      username,
      isLoggedIn,
      login
    };
  }
};

通过 useStore 函数传入对应的store名称就能轻松获取到Pinia里的store实例啦，然后就可以像上面那样直接访问它里面的状态和调用actions，再把相关的数据和函数返回给模板使用哦。

在Vue3 setup store里，怎么确保数据的响应性呀？

无论是Vuex还是Pinia,它们本身在设计上就已经很好地保证了数据的响应性啦。

在Vuex中,当我们通过 store.state 访问状态时，Vue会自动对这些数据进行响应式处理哦，比如我们在模板里绑定了 store.state.cart.items，一旦这个数组里的元素有变化（通过触发合适的mutations或者actions来更新），模板会自动重新渲染来反映这个变化呢。

Pinia就更方便啦,它内部使用了Vue 3的 ref 和 reactive 等响应式API来创建store，所以我们获取到的store里的状态本身就是响应式的哦，像我们上面例子里获取到的 username 和 isLoggedIn 等，只要在对应的store里这些值发生了改变（通过调用actions等方式），组件的模板也会自动更新来展示新的值呢。

不过要注意哦,在修改数据的时候，一定要按照它们各自规定的方式来操作呀，比如Vuex要通过mutations或者actions来修改状态，Pinia要通过定义好的actions等方式来改变store里的值，这样才能确保数据响应性的正常发挥哦。

能在同一个Vue3组件的setup里同时用Vuex和Pinia吗？

理论上是可以的啦,不过一般情况下不太建议这样做哦，除非你的项目有特别的需求。

因为这样可能会让组件的状态管理逻辑变得有点复杂和混乱呢,每个状态管理库都有自己的一套规则和用法，同时使用的话，要确保在获取数据、触发操作等方面不会搞混咯。

但如果真的要同时用,步骤也和单独使用它们差不多啦，在setup函数里分别通过各自的 useStore 函数来获取Vuex的store实例和Pinia的store实例，然后按照它们各自的规范来使用里面的数据和触发操作就好啦。

import { useStore as useVuexStore } from 'vuex';
import { useStore as usePiniaStore } from 'pinia';
export default {
  setup() {
    const vuexStore = useVuexStore();
    const piniaStore = usePiniaStore('somePiniaStore');
    // 然后分别使用它们
    const cartItems = vuexStore.state.cart.items;
    const username = piniaStore.username;
    const addToCart = () => {
      vuexStore.dispatch('cart/addToCart', someProduct);
    };
    const login = () => {
      piniaStore.login(someCredentials);
    };
    return {
      cartItems,
      username,
      addToCart,
      login
    };
  }
};

不过还是那句话,尽量根据项目的实际情况来选择合适的状态管理方案，避免不必要的复杂性哦。

希望上面这些关于vue3 setup store的问答内容能让你对它的使用有更清楚的了解呀，这样在开发Vue 3项目的时候就能更得心应手地处理状态管理啦。

标签：实例Webstoresetupvue3