快捷導(dǎo)航

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

更新時(shí)間：2017年09月15日 08:15:38 作者：ghostwu

下面小編就為大家?guī)硪黄猇ue2.0基于vue-cli+webpack Vuex的用法(實(shí)例講解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

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

vuex是什么東東呢？

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

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

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

搭建環(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中引入，并注冊store：這樣我們就能通過this.$store來獲得這個(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存儲了一個(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ì)算屬性獲取到存儲在全局容器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í)候，就能看見在頁面上把store容器中 state的userName的值讀取出來了，如果修改userName的值，頁面上也會發(fā)生變化

五、，我們通過一些交互來改變狀態(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的值也會跟著更新，這種改變方式很好理解，接下來我們看下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)擊事件中的方法來傳遞

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í)例講解)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: