Bagaimana untuk melaksanakan pengurusan negeri global dalam vuejs

Vuex boleh digunakan untuk mencapai pengurusan keadaan global dalam vuejs; Vuex ialah model pengurusan negeri yang dibangunkan khas untuk aplikasi Vue.js. Ia boleh digunakan untuk mengurus data global dan status data aplikasi yang kompleks, seperti Brother Komunikasi komponen, penghantaran nilai komponen bersarang berbilang lapisan, dsb.

Persekitaran pengendalian tutorial ini: sistem Windows 7, vue versi 2.9.6, komputer DELL G3.

vuex pengurusan negeri global

Vuex ialah alat yang direka bentuk untuk Vue.jsCorak pengurusan negeri untuk pembangunan aplikasi. Ia boleh mengurus status data aplikasi kompleks, seperti komunikasi antara komponen adik-beradik, pemindahan nilai antara komponen bersarang berbilang lapisan, dsb.

Dalam istilah awam, vuex ialah pengurusan data global, digunakan untuk mengurus data global Vue hanya boleh memindahkan data antara komponen induk dan anak, dan ia menyusahkan disimpan dalam vuex dan dipanggil apabila digunakan.

Inti vuex:

• nyatakan
• mutasi
• tindakan
• getter

Penggunaan Vuex

Pasang dan gunakan vuex

Pemasangan

1. Pasang dalam projek

npm install vuex --save

2. Buat fail store.js baharu

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
      //存放初始数据
    count: 0
  },
  mutations: {
      //存放修改数据的方法
    increment (state) {
      state.count++
    }
  }
})

Gunakan data

Kaedah 1: Gunakan $store untuk memanggil

Gunakan ini.$store terus dalam komponen. Negeri memanggil data

this.$store.state.数据名

Kaedah 2: Import mapState, kembangkan data dalam komponen dan petakannya apabila menggunakannya, hanya tulis count terus

//先导入mapState
import {mapState} from 'vuex'

computed:[
    ...mapState(['count'])
]

Apabila beroperasi pada data, anda tidak boleh terus memanggil data keadaan Jika anda ingin mengubah suai data, anda perlu menulis kaedah dalam mutasi tujuannya adalah untuk memudahkan mencari tempat untuk menyelesaikan masalah

Fungsi dan penggunaan Mutasi

mutasi ialah kaedah untuk mengendalikan data

  mutations: {
//存放修改数据的方法
   add(state) {
     state.count++
   }
 }

Kaedah 1:

mencetuskan fungsi mutasi, dan menggunakan commit untuk memanggil nama kaedah di dalam

ini. $store.commit. Ini adalah cara pertama untuk mencetuskan mutasi

methods:{
   handle(){
       this.$store.commit('add')
   }
}

laluan parameter mutasiDua parameter boleh diluluskan dalam kaedah mutasi, yang pertama ialah keadaan, dan yang kedua ialah muatan parameter tersuai

  mutations: {
//存放修改数据的方法
   addN(state，N) {
     state.count+=N
   }
 }

Panggilan adalah dalam komponen Dalam kaedah

methods:{
   handle2(){
       //触发mutation并传参
       this.$store.commit('addN',4)
   }
}

gunakan kaedah dua

dan import petaMutasi fungsi dalam vuex ke dalam komponen

mapMutations(['sub']) ialah kaedah di dalam Pemetaan dengan kaedah dalam stor

... ialah pengendali pengembangan

import {mapMutations} from 'vuex'

methods:{
   //将方法名写在[]里  ['addN','sub']
   ...mapMutations(['sub'])
   btnhandle(){
       //调用时直接写this.方法名
       this.sub()
       //当传入参数时，直接写这个参数，不需要写state
       this.addN(4)
   }
}

Nota : Anda tidak boleh menulis kod tak segerak dalam fungsi Mutasi seperti menulis fungsi pemasaan , walaupun halaman akan berubah, nilai status sebenar tidak akan berubah. Jadi terdapat penggunaan tindakan

Tindakan

Tindakan digunakan untuk mengendalikan tugas tak segerak.

Jika anda menukar data melalui operasi tak segerak, anda mesti menggunakan Tindakan dan bukannya Mutasi Walau bagaimanapun, dalam Tindakan, anda masih perlu menukar data secara tidak langsung dengan mencetuskan Mutasi

Ia adalah sama tahap sebagai mutasi dalam stor Tulis tindakan:{ } panggil kaedah mutasi di dalamnya, dan kemudian cetuskan Tindakan dalam komponen

  mutations: {
  //存放修改数据的方法
    add(state) {
      state.count++
    }
  },
  actions:{
      //context是上下文
      addAsync(context){
          setTimeout(()=>{
              //调用add方法，actions中不能直接修改state中的数据，只有mutation有这个权力
              context.commit('add')
          })
      }
  }

Gunakan tindakan untuk menggunakan penghantaran dalam komponen untuk mencetuskan

btnHandle(){
    //dispatch专门触发action
    this.$store.dispatch('addAsync')
}

Parameter yang diluluskan oleh tindakan

Tulis parameter formal dalam tindakan stor dan mutasi

  mutations: {
  //传参
    addN(state,n) {
      state.count+=n
    }
  },
  actions:{
      //context是上下文
      addAsync(context,n){
          setTimeout(()=>{
              //调用add方法，并传参
              context.commit('addN',n)
          })
      }
  }

Tulis parameter sebenar dalam komponen

btnHandle(){
    //dispatch专门触发action,并传入参数
    this.$store.dispatch('addAsync',5)
}

Yang kedua ialah mengembangkan dan memetakan Perkenalkan mapActions

//引入方法
import {mapActions} from 'vuex

methods:{
    //映射actions
    ...mapActions(['addAsync'])
    btnhandle(){
        //调用对应的actions
        this.addAsync()
    }
}
//也可以不写btnhandle方法了直接将映射的方法名写在点击操作上

Nota: Panggil kaedah tindakan dalam komponen, gunakan commit dalam tindakan memanggil mutasi Kaedah

getter

• Getter digunakan untuk memproses data dalam Store untuk membentuk data baharu. Data asal tidak akan diubah suai
• Getter boleh memproses data sedia ada dalam Store untuk membentuk data baharu, serupa dengan sifat terkira Vue.
• Apabila data dalam Store berubah, data dalam Getter juga akan berubah.

state:{
   count:0
},
getters:{
   showNum(state){
       return '当前最新的数据是:'+state.count
   }
}

Kaedah panggilan pertama: this.$store .getters .Nama kaedah

this.$store.getters.showNum

Kaedah panggilan kedua: pengembangan pemetaan, pemetaan dalam pengiraan

import {mapGetters} from 'vuex'

computed:{
   ...mapGetters(['showNum'])
}

Ringkasan

• state digunakan untuk menyimpan data awal dan melakukan pemulaan data Adalah lebih baik untuk tidak memanggil keadaan secara langsung dalam komponen
• mutations digunakan kaedah simpan dan kendalikan data, tetapi operasi tak segerak tidak boleh dilakukan
• actionsTerdapat kaedah untuk operasi tak segerak
• getters digunakan untuk memproses data dalam Simpan untuk membentuk data baharu

Cadangan berkaitan: "tutorial vue.js"

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan pengurusan negeri global dalam vuejs. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!