uniapp怎么使用vuex-uni-app-PHP中文网

uniapp怎么使用vuex

下次还敢

发布： 2024-04-06 03:45:25

原创

1740人浏览过

如何在 UniApp 中使用 Vuex？安装 Vuex 依赖。创建 Vuex 存储以管理应用程序状态和逻辑。通过 this.$store 从组件中访问 Vuex 存储。使用映射助手将 Vuex 操作和状态绑定到组件中。对于大型应用程序，可以将 Vuex 存储拆分为多个模块。

uniapp怎么使用vuex

如何在 UniApp 中使用 Vuex

简介
Vuex 是一个状态管理工具，它允许你在 Vue.js 应用中集中管理应用程序的状态和逻辑。UniApp 作为一款跨平台开发框架，也支持使用 Vuex。

安装 Vuex
首先，使用以下命令安装 Vuex 依赖：

npm install vuex --save

登录后复制

或者

立即学习“前端免费学习笔记（深入）”；

yarn add vuex

登录后复制

创建 Vuex 存储
接下来，创建一个 Vuex 存储，它将包含应用程序的状态和逻辑。

// store/index.js
import Vuex from 'vuex'
import Vue from 'vue'

Vue.use(Vuex)

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

export default store

登录后复制

在组件中使用 Vuex
要从组件中访问 Vuex 存储，可以使用 this.$store。

// App.vue
<template>
  <div>{{ this.$store.state.count }}</div>
  <button @click="increment">Increment</button>
  <button @click="incrementAsync">Increment Async</button>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  methods: {
    ...mapActions([
      'increment',
      'incrementAsync'
    ])
  }
}
</script>

登录后复制

模块化 Vuex 存储
对于大型应用程序，将 Vuex 存储拆分为多个模块很有用。每个模块都可以管理其自己的状态和逻辑。

// store/index.js
import Vuex from 'vuex'
import Vue from 'vue'
import counter from './modules/counter'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    counter
  }
})

export default store

登录后复制

// store/modules/counter.js
export default {
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    incrementAsync ({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  },
  getters: {
    getCount (state) {
      return state.count
    }
  }
}

登录后复制

提示