VueX的簡介，以及使用方法（一）——VueX的簡介與引用
2022-05-11 11:02:18

• 　　　多個(gè)視圖依賴同一個(gè)狀態(tài)。例如：商品列表，進(jìn)入商品詳情頁面，在點(diǎn)擊購買進(jìn)入結(jié)算頁面。此時(shí)詳情與結(jié)算都依賴于商品id這個(gè)同一個(gè)狀態(tài)。
• 　　　不同視圖行為需要變更同一狀態(tài)。例如：首頁顯示與詳情顯示，同時(shí)依賴于同一個(gè)狀態(tài)。

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

　　　對(duì)于問題2：可以使用，總線模式，或者父子直接引用。

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

　　　所以引用VueX。

　　三、引入VueX：　　

　　　第一種：在創(chuàng)建項(xiàng)目時(shí)候就引用。不確定有無創(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的核心概念。

?