Cara menggunakan Vuex untuk pengurusan negeri dalam uniapp

Cara menggunakan Vuex untuk pengurusan negeri dalam apl uni, contoh kod khusus diperlukan

Pengenalan:
Dalam pembangunan uni-apl, apabila aplikasi menjadi semakin kompleks, kita sering perlu mengurus dan berkongsi keadaan individu antara komponen. Vuex ialah model pengurusan negeri yang dibangunkan khusus untuk aplikasi Vue.js. Artikel ini akan memperkenalkan cara menggunakan Vuex untuk pengurusan negeri dalam apl uni dan memberikan contoh kod khusus.

1. Pengenalan kepada Vuex
Vuex ialah model pengurusan negeri yang dibangunkan khusus untuk aplikasi Vue.js. Ia menggunakan storan berpusat untuk mengurus status semua komponen aplikasi dan memastikan ketekalan status dengan peraturan yang sepadan. Menggunakan Vuex dalam apl uni boleh mengurus status aplikasi dengan mudah, mengelakkan masalah status berselerak dan kesukaran dalam penyelenggaraan, dan meningkatkan kebolehbacaan dan kebolehselenggaraan kod.

2. Pasang dan konfigurasikan Vuex

1. Dalam direktori root projek uni-app, gunakan npm atau yarn untuk memasang Vuex:

   npm install vuex --save

   atau

   yarn add vuex

2. Dalam direktori root uni-app buat fail bernama folder untuk kedai dan buat fail bernama index.js di dalamnya.

3. Dalam fail index.js, perkenalkan Vue dan Vuex, dan pasang Vuex melalui kaedah Vue.use().

   import Vue from 'vue'
   import Vuex from 'vuex'
   
   Vue.use(Vuex)

4. Buat contoh Vuex dan tentukan atribut seperti keadaan dan mutasi.

   export default new Vuex.Store({
     state: {},
     mutations: {},
     actions: {},
     getters: {}
   })

5. Perkenalkan kedai dalam main.js dan lekapkannya pada contoh Vue.

   import store from './store'
   
   // ...
   new Vue({
     store,
     // ...
   }).$mount()

Pada ketika ini, kami telah berjaya memasang dan mengkonfigurasi Vuex.

3. Gunakan Vuex untuk pengurusan negeri

1. Tentukan keadaan aplikasi dalam keadaan. Sebagai contoh, kita boleh menentukan keadaan yang dipanggil kiraan dalam keadaan.

   state: {
     count: 0
   }

2. Tentukan kaedah untuk mengubah suai keadaan dalam mutasi. Sebagai contoh, kita boleh menentukan kaedah yang dinamakan kenaikan untuk meningkatkan nilai kiraan.

   mutations: {
     increment(state) {
    state.count++
     }
   }

3. Gunakan keadaan Vuex dalam komponen anda. Kita boleh mendapatkan nilai keadaan melalui ini.$store.state.count dan memaparkannya menggunakan {{count}} dalam templat.

   <template>
     <view>
    <text>{{count}}</text>
    <button @click="increment">增加</button>
     </view>
   </template>
   
   <script>
   export default {
     computed: {
    count() {
      return this.$store.state.count
    }
     },
     methods: {
    increment() {
      this.$store.commit('increment')
    }
     }
   }
   </script>

4. Gunakan getter untuk mengira status
Kadangkala, kita mungkin perlu mengira status baharu berdasarkan status sedia ada. Pada masa ini, getter boleh digunakan untuk mengira status.

1. Tentukan kaedah harta terkira dalam getter. Sebagai contoh, kita boleh mentakrifkan kaedah sifat terkira yang dipanggil doubleCount untuk mengira kiraan berganda.

   getters: {
     doubleCount(state) {
    return state.count * 2
     }
   }

2. Gunakan getter dalam komponen. Kita boleh mendapatkan nilai harta yang dikira melalui ini.$store.getters.doubleCount.

   <template>
     <view>
    <text>{{doubleCount}}</text>
     </view>
   </template>
   
   <script>
   export default {
     computed: {
    doubleCount() {
      return this.$store.getters.doubleCount
    }
     }
   }
   </script>

Ringkasan:
Dengan menggunakan Vuex untuk pengurusan negeri, kami boleh mengurus dan berkongsi keadaan dengan mudah antara pelbagai komponen, dan boleh meningkatkan kebolehbacaan dan kebolehselenggaraan kod. Artikel ini bermula dengan memasang dan mengkonfigurasi Vuex, memperkenalkan secara terperinci kaedah menggunakan Vuex untuk pengurusan keadaan dalam apl uni, dan menyediakan contoh kod khusus. Harap artikel ini dapat membantu anda.

Atas ialah kandungan terperinci Cara menggunakan Vuex untuk pengurusan negeri dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!