Vue的項(xiàng)目中，如果項(xiàng)目簡單， 父子組件之間的數(shù)據(jù)傳遞可以使用 props 或者 $emit 等方式 進(jìn)行傳遞

但是如果是大中型項(xiàng)目中，很多時(shí)候都需要在不相關(guān)的平行組件之間傳遞數(shù)據(jù)，并且很多數(shù)據(jù)需要多個(gè)組件循環(huán)使用。這時(shí)候再使用上面的方法會(huì)讓項(xiàng)目代碼變得冗長，并且不利于組件的復(fù)用，提高了耦合度。

Vue 的狀態(tài)管理工具 Vuex 完美的解決了這個(gè)問題。

看了下vuex的官網(wǎng)，覺得不是很好理解，有的時(shí)候我們只是需要?jiǎng)討B(tài)的從一個(gè)組件中獲取數(shù)據(jù)（官網(wǎng)稱為“組件層級”：是個(gè)獨(dú)立的控件，作用范圍只在組件之內(nèi)）然后想放到一個(gè)被官網(wǎng)稱作“應(yīng)用層級”（在項(xiàng)目的任意地方都可以隨時(shí)獲取和動(dòng)態(tài)的修改，在修改之后，vue會(huì)為你的整個(gè)項(xiàng)目做更新）的地方。這是我最初來學(xué)習(xí)vue的原因，我并不想做一個(gè)前端數(shù)據(jù)結(jié)構(gòu)庫。。。

下面看看我一步一步的小例子

首先安裝vuex 目前公司項(xiàng)目已經(jīng)被我從vue1.0遷移到vue2.0，下載并安裝vue

npm install vuex --save

然后在index.html同級新建文件夾store，在文件夾內(nèi)新建index.js文件，這個(gè)文件我們用來組裝模塊并導(dǎo)出 store 的文件

【一、獲取store中的數(shù)據(jù)】

import Vue from 'vue'
import Vuex from 'vuex'

// 告訴 vue “使用” vuex
Vue.use(Vuex)

// 創(chuàng)建一個(gè)對象來保存應(yīng)用啟動(dòng)時(shí)的初始狀態(tài)
// 需要維護(hù)的狀態(tài)
const store = new Vuex.Store({
 state: {
  // 放置初始狀態(tài) app啟動(dòng)的時(shí)候的全局的初始值
  bankInf: {"name":"我是vuex的第一個(gè)數(shù)據(jù)","id":100,"bankName":"中國銀行"}
 }
})
// 整合初始狀態(tài)和變更函數(shù)，我們就得到了我們所需的 store
// 至此，這個(gè) store 就可以連接到我們的應(yīng)用中
export default store

在vue根文件中注冊store，這樣所有的組件都可以使用store中的數(shù)據(jù)了

我的項(xiàng)目文件結(jié)構(gòu)：

在main.js文件中注冊store

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './../store/index'

/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 store,
 template: '<App/>',
 components: { App }
})

這樣簡單的第一步就完成了，你可以再任意組件中使用store中的數(shù)據(jù)，使用方法也很簡單，就是使用計(jì)算屬性返回store中的數(shù)據(jù)到一個(gè)新屬性上，然后在你模板中則可以使用這個(gè)屬性值了：

任意組件中：

export default {
 ...
 computed: {
  bankName() {
   return this.$store.state.bankInf.bankName;
  }
 },
 ...
}

在模板中可以直接使用bankName這個(gè)屬性了，也就是store中的中國銀行

【二、在組件中修改store中的狀態(tài) 】

在任意組件中添加html模板

<div class="bank">
  <list-header :headerData="bankName"></list-header>
  04銀行詳情頁面
  <input name="" v-model="textValue">
  <button type="button" name="獲取數(shù)據(jù)" @click="newBankName"></button>
</div>

然后組件中提交mutation

export default {
 ...
 computed: {
  bankName() {
   return this.$store.state.bankInf.bankName;
  }
 },
 methods: {
  newBankName: function() {
   this.$store.commit('newBankName', this.textValue)
  }
 }
 ...  
}

在store中的index.js中添加mutations：

const store = new Vuex.Store({
 state: {
  // 放置初始狀態(tài) app啟動(dòng)的時(shí)候的全局的初始值
  bankInf: {"name":"我是vuex的第一個(gè)數(shù)據(jù)","id":100,"bankName":"中國銀行"},
  count:0
 },
 mutations: {
  newBankName(state,msg) {
   state.bankInf.bankName = msg;
  }
 }
})

這樣你發(fā)現(xiàn)，在點(diǎn)擊提交按鈕的時(shí)候，頁面已經(jīng)顯示你修改的數(shù)據(jù)了，并且所有復(fù)用這個(gè)組件的地方的數(shù)據(jù)全都被vue更新了；

如果在使用中發(fā)現(xiàn)報(bào)錯(cuò)this.$store.commit is not a function ，請打開你項(xiàng)目的配置文件package.json，查看你正在使用的vuex的版本，我正在使用的是vuex2.0,

如果想刪除舊版本的vuex并安裝新版本的vuex請使用

npm rm vuex --save

然后安裝最新的vuex

npm install vuex --save

即可解決這個(gè)錯(cuò)誤，或者是查看vuex官網(wǎng)api修改提交mutation的語句

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論