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

Vue2.0基于vue-cli+webpack Vuex的用法(實(shí)例講解)

 更新時(shí)間:2017年09月15日 08:15:38   作者:ghostwu  
下面小編就為大家?guī)?lái)一篇Vue2.0基于vue-cli+webpack Vuex的用法(實(shí)例講解)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧

在這之前,我已經(jīng)分享過組件與組件的通信機(jī)制以及父子組件之間的通信機(jī)制,而我們的vuex就是為了解決組件通信問題的

vuex是什么東東呢?

組件通信的本質(zhì)其實(shí)就是在組件之間傳遞數(shù)據(jù)或組件的狀態(tài)(這里將數(shù)據(jù)和狀態(tài)統(tǒng)稱為狀態(tài)),但可以看到如果我們通過最基本的方式來(lái)進(jìn)行通信,一旦需要管理的狀態(tài)多了,代碼就會(huì)變得十分臃腫和龐大。對(duì)所有狀態(tài)的管理便會(huì)顯得力不從心,因此,vuex出現(xiàn)了,他就是幫助我們把公用的狀態(tài)全抽出來(lái)放在vuex的容器中,然后根據(jù)一定的規(guī)則來(lái)進(jìn)行管理,我們趕緊來(lái)用一下吧,想要掌握vuex的用法,你應(yīng)該要掌握組件之間的通信,如果不了解,請(qǐng)參考以下這兩篇文章:

Vue2.0基于vue-cli+webpack父子組件通信教程(實(shí)例講解)

Vue2.0基于vue-cli+webpack同級(jí)組件之間的通信教程(推薦)

搭建環(huán)境開始:

在git命令行下,執(zhí)行以下命令完成環(huán)境的搭建:

1,npm install --global vue-cli  安裝vue命令行工具

2,vue init webpack vue-demo   使用vue命令生成一個(gè)webpack項(xiàng)目,項(xiàng)目名稱為vue-demo

3,cd vue-demo 切入項(xiàng)目

4,npm install安裝package.json中的所有依賴包

5,npm run dev運(yùn)行項(xiàng)目

然后刪除默認(rèn)的Hello.vue組件,把App.vue整理成以下樣子

<template>
 <div id="app">
 這是一個(gè)空的app
 </div>
</template>

<script>
 export default {
  name : 'app'
 }
</script>

 把router下面index.js文件修改如下:

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
 routes: [
  {
   path: '/',
  }
 ]
})

基本環(huán)境搭建完畢之后,開始安裝vuex了

安裝命令:npm install vuex --save-dev

一、安裝完成之后,在main.js中引入,并注冊(cè)store:這樣我們就能通過this.$store來(lái)獲得這個(gè)容器了

main.js代碼:

import Vue from 'vue'
import App from './App'
import router from './router'
import Vuex from 'vuex'
import store from './vuex/store'

Vue.use(Vuex)

Vue.config.productionTip = false

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

二、在src目錄下創(chuàng)建vuex目錄,然后在vuex目錄下創(chuàng)建store.js,用于存放所有的狀態(tài)(改變的數(shù)據(jù))

store.js代碼:

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

Vue.use(Vuex)

const store = new Vuex.Store({
 state: {
  userName : 'ghostwu'
 }
})

export default store

在state存儲(chǔ)了一個(gè)狀態(tài)userName

三、將狀態(tài)中的數(shù)據(jù)渲染到組件中

在components下面新建一個(gè)組件Main.vue,代碼如下:

<template>
  <div>
    <h3>{{myName}}</h3>
  </div>
</template>
<script>
  export default {
    name : "Main",
    computed : {
      myName (){
        return this.$store.state.userName;
      }
    }
  }
</script>

通過一個(gè)計(jì)算屬性獲取到存儲(chǔ)在全局容器store中state保存的狀態(tài)值

四,在App.vue中引入組件Main.vue

App.vue代碼:

<template>
 <div id="app">
  <Mainc></Mainc>
 </div>
</template>

<script>
import Mainc from './components/Main.vue';
export default {
 name: 'app',
 components : {
  Mainc
 }
}
</script>

這個(gè)時(shí)候,就能看見在頁(yè)面上把store容器中 state的userName的值讀取出來(lái)了, 如果修改userName的值,頁(yè)面上也會(huì)發(fā)生變化

五、,我們通過一些交互來(lái)改變狀態(tài),看下組件是否能收到state的值

在components組件下新建一個(gè)Header.vue組件,代碼如下:

<template>
  <div>
    <input type="text" v-model="msg" />
    <input type="button" v-on:click="setName" value="點(diǎn)我" />
  </div>
</template>
<script>
  export default {
    name : 'Header',
    data(){
      return {
        msg : ''
      }
    },
    methods : {
      setName(){
        this.$store.state.userName = this.msg;
      }
    }
  }
</script>

App.vue引入組件Header

App.vue代碼如下:

<template>
 <div id="app">
  <Headerc></Headerc>
  <Mainc></Mainc>
 </div>
</template>

<script>
import Headerc from './components/Header.vue';
import Mainc from './components/Main.vue';
export default {
 name: 'app',
 components : {
  Headerc,
  Mainc
 }
}
</script>

當(dāng)我點(diǎn)擊按鈕的時(shí)候,改變state中useName的值,Main組件中的state.userName的值也會(huì)跟著更新,這種改變方式很好理解,接下來(lái)我們看下vuex推薦的狀態(tài)改變方式

六、vuex推薦的狀態(tài)改變方法

在store.js中新建一個(gè)mutations,存放被修改的狀態(tài)

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

Vue.use(Vuex)

const store = new Vuex.Store({
 state: {
  userName : 'ghostwu'
 },
 mutations : {
  showUserName( state, msg ){
   state.userName = msg;
  }
 }
})

export default store

其中第一個(gè)參數(shù) state 就是 $store.state,第二個(gè)參數(shù) msg 需要另外傳入,這個(gè)參數(shù)我們通過Header.vue的點(diǎn)擊事件中的方法來(lái)傳遞

Header.vue代碼:

<template>
  <div>
    <input type="text" v-model="msg" />
    <input type="button" v-on:click="setName" value="點(diǎn)我" />
  </div>
</template>
<script>
  export default {
    name : 'Header',
    data(){
      return {
        msg : ''
      }
    },
    methods : {
      setName(){
        this.$store.commit( 'showUserName', this.msg );
      }
    }
  }
</script>

$store.commit 把this.msg的值提交給showUserName。state就收到了改變的狀態(tài)了,這就是一個(gè)vuex最基本的用法和作用

以上這篇Vue2.0基于vue-cli+webpack Vuex的用法(實(shí)例講解)就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論