APP
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/
