亚洲精品亚洲人成在线观看麻豆,在线欧美视频一区,亚洲国产精品一区二区动图,色综合久久丁香婷婷

              當前位置:首頁 > 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ù)立即開通 >