當前位置:首頁 > IT技術(shù) > 其他 > 正文

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

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

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

   對于問題2:可以使用,總線模式,或者父子直接引用。

   都可以解決,但是過于繁瑣,如果小項目無所謂,但是同一句話*1000就是很大的一串垃圾代碼。

   所以引用VueX。

  三、引入VueX:  

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

?

?

?

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

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可以直接訪問到倉庫內(nèi)的狀態(tài)。
    console.log(this.$store.state)
  }
}

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

?

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

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