uniapp中组件页面初始化时获取store中的数据

在uniapp中，可以使用vuex来管理全局的数据状态。组件初始化时可以通过computed属性来获取store中的数据，然后在页面中进行渲染。

以下是一个示例代码：

<template>
  <div>
    <p>{{ username }}</p>
    <p>{{ email }}</p>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters([
      'username',
      'email'
    ])
  }
}
</script>

在上面的代码中，我们使用了`mapGetters`方法来将vuex中的`username`和`email`映射到当前组件的computed属性中。然后在页面中通过`{{}}`来渲染这些数据。

相关问题

uniapp 中vuex初始化数据，更改数据，获取数据，dispatch分发数据

在uniapp中使用vuex，可以通过以下步骤进行初始化数据、更改数据、获取数据和分发数据：

1. 创建一个vuex的实例，可以在store目录下创建一个index.js文件，代码如下：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    incrementAsync ({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  }
})

export default store

2. 在main.js中引入vuex的实例并挂载到Vue实例上

import Vue from 'vue'
import App from './App'
import store from './store'

Vue.prototype.$store = store

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
  store,
  ...App
})
app.$mount()

3. 在组件中通过$store.state.xxx来获取state中的数据，通过$store.commit('mutationName')来触发mutation更新state中的数据，通过$store.dispatch('actionName')来分发actions。

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="incrementAsync">Increment Async</button>
  </div>
</template>

<script>
export default {
  computed: {
    count () {
      return this.$store.state.count
    }
  },
  methods: {
    increment () {
      this.$store.commit('increment')
    },
    incrementAsync () {
      this.$store.dispatch('incrementAsync')
    }
  }
}
</script>

uniapp在data中获取store中的数据

在uniapp中，通过 `this.$store.state` 可以直接获取 Vuex store 中的状态。因此，你可以在组件的 `data` 中直接使用它来初始化组件的状态。

例如，如果你的 Vuex store 中有一个 `userInfo` 状态，你可以这样在组件的 `data` 中使用它：

export default {
  data() {
    return {
      username: this.$store.state.userInfo.username,
      email: this.$store.state.userInfo.email
    }
  }
}

这样，组件的 `username` 和 `email` 就会被初始化为 `userInfo` 对象中的相应属性。

当然，如果你需要监听 `userInfo` 状态的变化，你还需要使用 `watch` 或者 `computed`。例如，你可以这样使用 `computed`：

export default {
  computed: {
    username() {
      return this.$store.state.userInfo.username;
    },
    email() {
      return this.$store.state.userInfo.email;
    }
  }
}

这样，当 `userInfo` 状态发生变化时，`computed` 会自动更新组件的状态。

需要注意的是，在使用 `this.$store.state` 时，你需要确保 Vuex store 已经被正确引入到了当前组件中。如果你在组件中引入了 Vuex store，但仍然无法访问 `this.$store.state`，你需要检查是否正确配置了 Vuex store。