vue中js文件读取vuex中仓库的数据

在Vue.js应用中，如果你想从Vuex store（仓库）中读取数据，你需要通过`this.$store.state`或`this.$store.getters`来访问。首先，你需要在Vuex store中设置相应的状态（state）或者计算属性（getters），然后在需要的地方导入并注入Vue实例。

例如，假设你在`store/modules/user.js`中有这样的状态：

export const state = {
  userInfo: null,
};

export const getters = {
  getUserInfo: (state) => state.userInfo,
};

在你的组件里，可以这样做来获取数据：

import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['getUserInfo']), // 使用mapState自动解构并注入到组件的computed中
    userData() {
      return this.getUserInfo; // 如果你想直接使用getter的名称
    }
  },
  created() {
    console.log(this.userData); // 这里会打印出从Vuex store中获取的用户信息
  },
};

相关问题

vue3 配置vuex

### 如何在 Vue 3 项目中配置 Vuex 的状态管理

为了实现 Vuex 状态管理模式与 Vue 3 应用程序的集成，需遵循特定的方法来创建并引入 store 实例。

#### 创建 Store 文件夹结构
通常，在项目的 `src` 目录下建立名为 `store` 的文件夹用于存放所有的 state、mutation 和 action 定义。这有助于保持代码整洁有序[^1]。

#### 初始化 Vuex Store
下面是一个简单的例子展示如何初始化一个 Vuex store 并将其连接到 Vue 3 应用：

// src/store/index.ts
import { createStore } from 'vuex'

const store = createStore({
  state() {
    return {
      count: 0,
    }
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment')
    }
  }
})

export default store;

此部分定义了一个基本的状态对象 (`state`) ，以及两个方法：一个是改变状态的方法(`mutations`)；另一个是可以触发 mutation 或者执行异步操作的动作(`actions`)。

#### 将 Store 连接到应用程序
为了让整个应用都能访问这个共享的数据仓库，需要通过插件的形式把 store 注入到根组件里去。修改 main.ts 来完成这项工作:

// src/main.ts
import { createApp } from 'vue'
import App from './App.vue'
import store from './store' // 导入我们刚刚创建好的 store 

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

现在任何子组件都可以轻松获取全局状态信息了。例如可以在 HelloWorld 组件内这样使用它：

<!-- components/HelloWorld.vue -->
<template>
  <div class="hello">
    {{ message }}
    <p>Count is: {{ $store.state.count }}</p>
    <button @click="$store.commit('increment')">Increment</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "HelloWorld",
  props: ["msg"],
});
</script>

上述代码展示了如何在一个组件模板中读取来自 Vuex store 中存储的信息，并提供按钮让用户可以增加计数器数值。

uniapp vuex 持久化 vue3

### 实现 Vue3 中 UniApp 与 Vuex 状态持久化的方案

为了在 Vue3 的 UniApp 应用程序中实现 Vuex 状态管理的持久化存储，可以遵循以下方法：

#### 创建 Store 文件结构并配置 Vuex 和 `vuex-persistedstate`

首先，在项目的根目录下创建名为 `store` 的文件夹，并在其内部建立 `index.js` 文件用于初始化 Vuex 存储实例。此过程中会安装必要的依赖项以及设置持久化机制。

// store/index.js
import { createStore } from 'vuex'
import createPersistedState from 'vuex-persistedstate'

export default createStore({
  state: {
    // 定义初始状态属性...
  },
  mutations: {
    // 定义改变状态的方法...
  },
  actions: {
    // 定义异步操作逻辑...
  },
  getters: {
    // 定义计算派生状态...
  },
  plugins: [
    createPersistedState({
      storage: {
        getItem: (key) => uni.getStorageSync(key),
        setItem: (key, value) => uni.setStorageSync(key, value),
        removeItem: key => uni.removeStorageSync(key)
      }
    })
  ]
})

这段代码展示了如何通过自定义 `storage` 对象适配器来利用 `uniapp` 提供的同步 API (`uni.getStorageSync`, `uni.setStorageSync`) 来保存和读取本地缓存的数据[^3]。

#### 注册全局 Store 实例到应用入口处

接着，在项目的主要 JavaScript 文件（通常是 `main.js` 或者对于 UniApp 可能是 `App.vue`），注册之前构建好的 Vuex Store 到整个应用程序上下文中去。

// main.js or App.vue <script>
import { createApp } from 'vue';
import App from './App.vue';
import store from './store';

const app = createApp(App);
app.use(store);

app.mount('#app');

这里说明了怎样把已经准备完毕的状态管理系统挂载至 Vue 实例上以便于组件间共享访问[^2]。

#### 使用 State 数据绑定视图层展示

最后一步是在模板内声明响应式的变量并通过映射工具函数如 `mapState()` 将其连接起来显示给用户看；同时也可以调用分发事件触发相应的业务流程处理动作。

<!-- 组件 .vue -->
<template>
  <div>{{ id }}</div> <!-- 显示来自 store 的 id 属性 -->
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['id']),
  },
};
</script>

上述片段解释了如何借助辅助函数简化对集中式仓库里特定字段的选择过程，并将其结果作为计算属性的一部分参与页面渲染工作流之中[^4]。