How to use vuex in uniapp-uni-app-php.cn

How to use vuex in uniapp

下次还敢

Release： 2024-04-06 03:45:25

Original

920 people have browsed it

How to use Vuex in UniApp

Introduction
Vuex is a state management tool that allows you to centrally manage applications in Vue.js applications Program state and logic. As a cross-platform development framework, UniApp also supports the use of Vuex.

Install Vuex
First, use the following command to install Vuex dependencies:

<code class="bash">npm install vuex --save</code>

Copy after login

<code class="bash">yarn add vuex</code>

Copy after login

Create Vuex storage
Next, create a Vuex store that will contain the application's state and logic.

<code class="javascript">// 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</code>

Copy after login

Using Vuex in a component
To access the Vuex store from a component, you can use this.$store.

<code class="javascript">// 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></code>

Copy after login

Modular Vuex Store
For large applications, it is useful to split the Vuex store into multiple modules. Each module can manage its own state and logic.

<code class="javascript">// 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</code>

Copy after login

<code class="javascript">// 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
    }
  }
}</code>

Copy after login

Tip

Create Vuex storage when the application starts.
Access the Vuex store from within the component using this.$store.
Bind Vuex actions and states into components by using mapping helpers such as mapActions and mapState.
Vuex storage can be split into multiple modules as needed.

The above is the detailed content of How to use vuex in uniapp. For more information, please follow other related articles on the PHP Chinese website!