如何快速入門Vuex-創(chuàng)新互聯(lián)

本篇文章為大家展示了如何快速入門Vuex，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

創(chuàng)新互聯(lián)建站長期為千余家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為紅寺堡企業(yè)提供專業(yè)的做網(wǎng)站、成都網(wǎng)站設(shè)計，紅寺堡網(wǎng)站改版等技術(shù)服務(wù)。擁有10年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

一、前言

當(dāng)我們的應(yīng)用遇到多個組件共享狀態(tài)時，會需要多個組件依賴于同一狀態(tài)。傳參的方法對于多層嵌套的組件將會非常繁瑣，并且對于兄弟組件間的狀態(tài)傳遞無能為力。在搭建下面頁面時，你可能會對 vue 組件之間的通信感到崩潰 ，特別是非父子組件之間通信。此時就應(yīng)該使用vuex，輕松可以搞定組件間通信問題。

 

二、什么是Vuex

Vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。這里的關(guān)鍵在于集中式存儲管理。 這意味著本來需要共享狀態(tài)的更新是需要組件之間通訊的，而現(xiàn)在有了vuex，就組件就都和store通訊了 。

三、什么時候使用Vuex

雖然 Vuex 可以幫助我們管理共享狀態(tài)，但也附帶了更多的概念和框架。這需要對短期和長期效益進(jìn)行權(quán)衡。 如果您的應(yīng)用夠簡單，您最好不要使用 Vuex,因為使用 Vuex 可能是繁瑣冗余的。一個簡單的global event bus就足夠您所需了。但是， 如果您需要構(gòu)建一個中大型單頁應(yīng)用，您很可能會考慮如何更好地在組件外部管理狀態(tài)，Vuex 將會成為自然而然的選擇。

四、Vuex安裝(限定開發(fā)環(huán)境為 vue-cli)

首先要安裝vue-cli腳手架，對于大陸用戶，建議將npm的注冊表源設(shè)置為國內(nèi)的鏡像(淘寶鏡像），可以大幅提升安裝速度。

npm config set registry https://[registry.npm.taobao.org](http://registry.npm.taobao.org/)
npm config get registry//配置后可通過下面方式來驗證是否成功
npm install -g cnpm --registry=[https://registry](https://registry/).npm.taobao.org
//cnpm安裝腳手架
cnpm install -g vue-cli
vue init webpack my-vue
cd my-vue
cnpm install
cnpm run dev

腳手架安裝好后，再安裝vuex

cnpm install vuex --save

 五、如何使用Vuex

1.如何通過Vuex來實現(xiàn)如下效果？

 

①創(chuàng)建一個store.js文件

import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)
const store = new Vuex.Store({
 state: { //這里的state必須是JSON，是一個對象
 count: 1 //這是初始值
 },
 mutations: {//突變，羅列所有可能改變state的方法
 add(state) {
  state.count++; //直接改變了state中的值，而并不是返回了一個新的state
 },
 reduce(state){
  state.count--;
 }
 }
});
export default store;//用export default 封裝代碼，讓外部可以引用

②在main.js文件中引入store.js文件

import store from "./vuex/store"
new Vue({
 router,
 store,
 el: '#app',
 render: h => h(App)
})

③新建一個模板count.vue

<template>
 <div>
  <h3>{{msg}}</h3><hr/>
  <h3>{{$store.state.count}}-{{count}}</h3>//這兩種寫法都可以
  <button @click="addNumber">+</button>
  <button @click="reduceNumber">-</button>
 </div>
</template>
<script>
import {mapState} from 'vuex'
export default {
 data() {
 return {
  msg: "Hello Vuex"
 };
 },
 methods: {
 addNumber() {
  return this.$store.commit("add");
 },
 reduceNumber() {
  return this.$store.commit("reduce");
 }
 },
 computed: mapState(['count'])// 映射 this.count 到 this.$store.state.count
         mapState 函數(shù)可以接受一個對象，也可以接收一個數(shù)組
};
</script>

由于 store 中的狀態(tài)是響應(yīng)式的，當(dāng) Vue 組件從 store 中讀取狀態(tài)的時候，若 store 中的狀態(tài)發(fā)生變化，那么相應(yīng)的組件也會相應(yīng)地得到高效更新。 在組件中調(diào)用 store 中的狀態(tài)簡單到僅需要在計算屬性中返回即可。改變store 中的狀態(tài)的唯一途徑就是顯式地提交 (commit) mutations。

這樣，我們就可以實現(xiàn)自增1或是自減1，那假如我們想要點擊一次實現(xiàn)自增2，這該如何實現(xiàn)，也就是如何向Mutations傳值？

2.如何在Mutations里傳遞參數(shù)

先store.js文件里給add方法加上一個參數(shù)n

mutations: {
 add(state,n) {
  state.count+=n;
 },
 reduce(state){
  state.count--;
 }
 }

然后在Count.vue里修改按鈕的commit( )方法傳遞的參數(shù)

addNumber() {
  return this.$store.commit("add",2);
 },
 reduceNumber() {
  return this.$store.commit("reduce");
 }

3.getters如何實現(xiàn)計算過濾操作

getters從表面是獲得的意思，可以把他看作在獲取數(shù)據(jù)之前進(jìn)行的一種再編輯,相當(dāng)于對數(shù)據(jù)的一個過濾和加工。你可以把它看作store.js的計算屬性。

例如：要對store.js文件中的count進(jìn)行操作，在它輸出前，給它加上100。

首先要在store.js里Vuex.Store()里引入getters

getters:{
  count:state=>state.count+=100
 }

然后在Count.vue中對computed進(jìn)行配置，在vue 的構(gòu)造器里邊只能有一個computed屬性，如果你寫多個，只有最后一個computed屬性可用，所以要用展開運算符”…”對上節(jié)寫的computed屬性進(jìn)行一個改造。

computed: {
 ...mapState(["count"]),
 count() {
  return this.$store.getters.count;
 }
 }

需要注意的是，此時如果點擊'+'，就會增加102，如果點擊'-',就會增加99，最后的結(jié)果是mutations和getters共同作用的。

4.actions如何實現(xiàn)異步修改狀態(tài)

actions和上面的Mutations功能基本一樣，不同點是， actions是異步的改變state狀態(tài)，而Mutations是同步改變狀態(tài) 。

①在store.js中聲明actions

actions: {
 addAction(context) {
  context.commit('add', 2);//一開始執(zhí)行add,并傳遞參數(shù)2
  setTimeout(() => {
  context.commit('reduce')
  }, 2000);//兩秒后會執(zhí)行reduce
  console.log('我比reduce提前執(zhí)行');
 },
 reduceAction({
  commit
 }) {
  commit('reduce')
 }
 }

actions是可以調(diào)用Mutations里的方法的,調(diào)用add和reduce兩個方法。在addAction里使用setTimeOut進(jìn)行延遲執(zhí)行。在actions里寫了兩個方法addAction和reduceAction，兩個方法傳遞的參數(shù)也不一樣。

context：上下文對象，這里你可以理解稱store本身。 {commit}：直接把commit對象傳遞過來，可以讓方法體邏輯和代碼更清晰明了

②模板中的使用

<p>
 <button @click="addNumber">+</button>
 <button @click="reduceNumber">-</button>
</p>
<p>  
 <button @click="addAction">+</button>//新增
 <button @click="reduceAction">-</button>//新增
</p>

import { mapState, mapGetters, mapActions } from "vuex";
methods:{
 ...mapMutations([ 
  'add','reduce'
 ]),
 ...mapActions(['addAction','reduceAction'])
}

最后得到如下效果：點擊addAction按鈕事件時，先累加2，兩秒后再減去1，而addNumber事件則不能實現(xiàn)異步效果。

上述內(nèi)容就是如何快速入門Vuex，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

文章標(biāo)題：如何快速入門Vuex-創(chuàng)新互聯(lián)
網(wǎng)站URL：http://www.muchs.cn/article22/ceoojc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計、網(wǎng)站設(shè)計、外貿(mào)建站、全網(wǎng)營銷推廣、網(wǎng)站策劃、虛擬主機(jī)

廣告

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