這篇文章主要介紹了Vue中vuex的示例分析，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)成立與2013年，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站建設(shè)、做網(wǎng)站網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢想脫穎而出為使命，1280元荔城做網(wǎng)站,已為上家服務(wù),為荔城各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18982081108

在 Vue.js 的項(xiàng)目中，如果項(xiàng)目結(jié)構(gòu)簡單， 父子組件之間的數(shù)據(jù)傳遞可以使用  props 或者 $emit 等方式.

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

 一、安裝并引入 Vuex

項(xiàng)目結(jié)構(gòu)：

 首先使用 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)
})

二、構(gòu)建核心倉庫 store.js

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

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

 在 src 目錄下創(chuàng)建一個(gè) 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

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

雖然在 main.js 中已經(jīng)引入了 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 中添加一個(gè)輸入框，將輸入框的值傳給 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，從而實(shí)現(xiàn)子組件之間的數(shù)據(jù)傳遞

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

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

首先在 store.js 中定義一個(gè)方法 newAuthor，其中第一個(gè)參數(shù) state 就是 $store.state，第二個(gè)參數(shù) msg 需要另外傳入

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

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

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

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Vue中vuex的示例分析”這篇文章對大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!

文章題目：Vue中vuex的示例分析
標(biāo)題來源：http://m.rwnh.cn/article26/pdidjg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、電子商務(wù)、網(wǎng)頁設(shè)計(jì)公司、虛擬主機(jī)、網(wǎng)站營銷、域名注冊

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)