欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue 與 Vuex 的第一次接觸遇到的坑

 更新時間:2018年08月16日 14:12:20   作者:WiseWrong  
在 Vue.js 的項目中,如果項目結構簡單, 父子組件之間的數據傳遞可以使用 props 或者 $emit 等方式,如果是大型項目,很多時候都需要在子組件之間傳遞數據,使用vue的狀態(tài)管理工具vuex很好的解決

在 Vue.js 的項目中,如果項目結構簡單, 父子組件之間的數據傳遞可以使用  props 或者 $emit 等方式

http://www.dbjr.com.cn/article/110186.htm

但是如果是大型項目,很多時候都需要在子組件之間傳遞數據,使用之前的方式就不太方便。Vue 的狀態(tài)管理工具 Vuex 完美的解決了這個問題。

一、安裝并引入 Vuex

項目結構:

首先使用 npm 安裝 Vuex

cnpm install vuex -S 

然后在 main.js 中引入

import Vue from 'vue'
import App from './App'
import Vuex from 'vuex'
import store from './vuex/store'
Vue.use(Vuex)
/* eslint-disable no-new */
new Vue({
 el: '#app',
 store,
 render: h => h(App)
})

二、構建核心倉庫 store.js

Vuex 應用的狀態(tài) state 都應當存放在 store.js 里面,Vue 組件可以從 store.js 里面獲取狀態(tài),可以把 store 通俗的理解為一個全局變量的倉庫。

但是和單純的全局變量又有一些區(qū)別,主要體現在當 store 中的狀態(tài)發(fā)生改變時,相應的 vue 組件也會得到高效更新。

在 src 目錄下創(chuàng)建一個 vuex 目錄,將 store.js 放到 vuex 目錄下

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
 // 定義狀態(tài)
 state: {
 author: 'Wise Wrong'
 }
})
export default store

這是一個最簡單的 store.js,里面只存放一個狀態(tài) author

雖然在 main.js 中已經引入了 Vue 和 Vuex,但是這里還得再引入一次

三、將狀態(tài)映射到組件

<template>
 <footer class="footer">
 <ul>
  <li v-for="lis in ul">{{lis.li}}</li>
 </ul>
 <p>
  Copyright&nbsp;&copy;&nbsp;{{author}} - 2016 All rights reserved
 </p>
 </footer>
</template>
<script>
 export default {
 name: 'footerDiv',
 data () {
  return {
  ul: [
   { li: '琉璃之金' },
   { li: '朦朧之森' },
   { li: '縹緲之滔' },
   { li: '逍遙之火' },
   { li: '璀璨之沙' }
  ]
  }
 },
 computed: {
  author () {
  return this.$store.state.author
  }
 }
 }
</script>

這是 footer.vue 的 html 和 script 部分

主要在 computed 中,將 this.$store.state.author 的值返回給 html 中的 author

頁面渲染之后,就能獲取到 author 的值 

四、在組件中修改狀態(tài)

然后在 header.vue 中添加一個輸入框,將輸入框的值傳給 store.js 中的 author

這里我使用了 Element-UI 作為樣式框架

上面將輸入框 input 的值綁定為 inputTxt,然后在后面的按鈕 button 上綁定 click 事件,觸發(fā) setAuthor 方法

methods: {
 setAuthor: function () {
   this.$store.state.author = this.inpuTxt
 }
}

在 setAuthor 方法中,將輸入框的值 inputTxt 賦給 Vuex 中的狀態(tài) author,從而實現子組件之間的數據傳遞

五、官方推薦的修改狀態(tài)的方式

上面的示例是在 setAuthor 直接使用賦值的方式修改狀態(tài) author,但是 vue 官方推薦使用下面的方法:

首先在 store.js 中定義一個方法 newAuthor,其中第一個參數 state 就是 $store.state,第二個參數 msg 需要另外傳入

然后修改 header.vue 中的 setAuthor 方法

這里使用 $store.commit 提交 newAuthor,并將 this.inputTxt 傳給 msg,從而修改 author

這樣顯式地提交(commit) mutations,可以讓我們更好的跟蹤每一個狀態(tài)的變化,所以在大型項目中,更推薦使用第二種方法。

總結

以上所述是小編給大家介紹的Vue 與 Vuex 的第一次接觸遇到的坑,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!

您可能感興趣的文章:

相關文章

  • Vue組件中prop屬性使用說明實例代碼詳解

    Vue組件中prop屬性使用說明實例代碼詳解

    這篇文章主要介紹了Vue組件中prop屬性使用說明,非常不錯具有一定的參考借鑒價值,需要的朋友可以參考下
    2018-05-05
  • Vue異步請求導致頁面數據渲染錯誤問題解決方法示例

    Vue異步請求導致頁面數據渲染錯誤問題解決方法示例

    這篇文章主要為大家介紹了Vue中異步請求導致頁面數據渲染錯誤問題解決方法示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-09-09
  • 解決vue的過渡動畫無法正常實現問題

    解決vue的過渡動畫無法正常實現問題

    今天小編就為大家分享一篇解決vue的過渡動畫無法正常實現問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-10-10
  • vue+js實現視頻淡入淡出效果

    vue+js實現視頻淡入淡出效果

    這篇文章主要為大家詳細介紹了vue+js實現視頻的淡入淡出,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-08-08
  • antd配置config-overrides.js文件的操作

    antd配置config-overrides.js文件的操作

    這篇文章主要介紹了antd配置config-overrides.js文件的操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-10-10
  • Vue組件化通訊的實例代碼

    Vue組件化通訊的實例代碼

    這篇文章主要介紹了Vue組件化通訊的實例代碼的相關資料,需要的朋友可以參考下
    2017-06-06
  • 詳解vue或uni-app的跨域問題解決方案

    詳解vue或uni-app的跨域問題解決方案

    這篇文章主要介紹了詳解vue或uni-app的跨域問題解決方案,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2020-02-02
  • vue實現按鈕切換圖片

    vue實現按鈕切換圖片

    這篇文章主要為大家詳細介紹了vue實現按鈕切換圖片,正向反向以及順序切換,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-01-01
  • 在vscode里使用.vue代碼模板的方法

    在vscode里使用.vue代碼模板的方法

    本篇文章主要介紹了在vscode里使用.vue代碼模板的方法,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-04-04
  • vue 左滑刪除功能的示例代碼

    vue 左滑刪除功能的示例代碼

    這篇文章主要介紹了vue 左滑刪除功能的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-01-01

最新評論