如何在 uni-app 中使用 vuex

656 阅读1分钟

uni-app是一个基于Vue.js的框架,因此可以在uni-app中使用Vuex来进行状态管理。

Vuex是一个专门为Vue.js设计的状态管理库,可以用于vue单页面,也可以用于vue项目中多个组件的状态共享。

在uni-app中使用Vuex,需要先安装Vuex依赖包,然后在创建Vue实例时引入Vuex,并将Vuex实例挂载到Vue实例中。

具体可以参考以下步骤:

  1. 安装Vuex依赖包

在命令行中输入以下命令:

npm install vuex --save

  1. 在main.js中引入Vuex

在main.js中引入Vuex并创建Vuex实例:

import Vue from 'vue'
import App from './App'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
  store,
  ...App
})
app.$mount()
  1. 在组件中使用Vuex

在组件中使用Vuex需要在export default中声明vuex:

export default {
  computed: {
    count() {
      return this.$store.state.count
    }
  },
  methods: {
    increment() {
      this.$store.commit('increment')
    }
  }
}

在上面的代码中,$store.state.count获取到Vuex中的’count’状态值,$store.commit('increment')执行Vuex中的’increment’ mutation来改变状态。