當(dāng)前位置:首頁(yè) > IT技術(shù) > 其他 > 正文

VueX的簡(jiǎn)介,以及使用方法(一)——VueX的簡(jiǎn)介與引用
2022-05-11 11:02:18

VueX的簡(jiǎn)介
  一、VueX是什么:
  Vuex 是一個(gè)專(zhuān)為 Vue.js 應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式。
   二、為什么要使用VueX:
  如果項(xiàng)目里有很多頁(yè)面(組件、視圖),頁(yè)面之間存在嵌套關(guān)系,且這些頁(yè)面都需要共享一個(gè)狀態(tài)。
   則會(huì)產(chǎn)生兩個(gè)問(wèn)題:
  •    多個(gè)視圖依賴(lài)同一個(gè)狀態(tài)。例如:商品列表,進(jìn)入商品詳情頁(yè)面,在點(diǎn)擊購(gòu)買(mǎi)進(jìn)入結(jié)算頁(yè)面。此時(shí)詳情與結(jié)算都依賴(lài)于商品id這個(gè)同一個(gè)狀態(tài)。
  •    不同視圖行為需要變更同一狀態(tài)。例如:首頁(yè)顯示與詳情顯示,同時(shí)依賴(lài)于同一個(gè)狀態(tài)。

   對(duì)于問(wèn)題1:一般解決辦法為,父子組件傳參,雖然麻煩但可以解決。

   對(duì)于問(wèn)題2:可以使用,總線模式,或者父子直接引用。

   都可以解決,但是過(guò)于繁瑣,如果小項(xiàng)目無(wú)所謂,但是同一句話(huà)*1000就是很大的一串垃圾代碼。

   所以引用VueX。

  三、引入VueX:  

   第一種:在創(chuàng)建項(xiàng)目時(shí)候就引用。不確定有無(wú)創(chuàng)建的可以去package.json下查看。

?

?

?

   第二種:在命令行中輸入安裝指令,回車(chē)。

npm install vuex --save

?

   然后配置VueX,在src下創(chuàng)建store文件夾(可以更改,一般都使用一樣方便閱讀),然后創(chuàng)建index.js文件。內(nèi)容如下:

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

Vue.use(Vuex)

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

   然后修改main.js

import store from './store'
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

   在App.vue內(nèi)引用

export default {
  methods: {

  },
  mounted () {
    // 使用this.$store.state.xxxx可以直接訪問(wèn)到倉(cāng)庫(kù)內(nèi)的狀態(tài)。
    console.log(this.$store.state)
  }
}

   以上就是VueX的簡(jiǎn)介與引用,算是VueX的基礎(chǔ)入門(mén)了,下一篇講解VueX的核心概念。

?

本文摘自 :https://www.cnblogs.com/

開(kāi)通會(huì)員,享受整站包年服務(wù)立即開(kāi)通 >