vue-cli+webpack Vuex怎么在Vue2.0項目中使用

vue-cli+webpack Vuex怎么在Vue2.0項目中使用？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

vuex是什么東東呢？

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

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

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

搭建環境開始：

在git命令行下，執行以下命令完成環境的搭建：

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

2，vue init webpack vue-demo   使用vue命令生成一個webpack項目，項目名稱為vue-demo

3，cd vue-demo 切入項目

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

5，npm run dev運行項目

然后刪除默認的Hello.vue組件，把App.vue整理成以下樣子

<template>
 <div id="app">
 這是一個空的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: '/',
  }
 ]
})

基本環境搭建完畢之后，開始安裝vuex了

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

一、安裝完成之后，在main.js中引入，并注冊store：這樣我們就能通過this.$store來獲得這個容器了

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目錄下創建vuex目錄，然后在vuex目錄下創建store.js，用于存放所有的狀態(改變的數據)

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存儲了一個狀態userName

三、將狀態中的數據渲染到組件中

在components下面新建一個組件Main.vue，代碼如下:

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

通過一個計算屬性獲取到存儲在全局容器store中state保存的狀態值

四，在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>

這個時候，就能看見在頁面上把store容器中 state的userName的值讀取出來了， 如果修改userName的值，頁面上也會發生變化

五、，我們通過一些交互來改變狀態，看下組件是否能收到state的值

在components組件下新建一個Header.vue組件，代碼如下：

<template>
  <div>
    <input type="text" v-model="msg" />
    <input type="button" v-on:click="setName" value="點我" />
  </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>

當我點擊按鈕的時候，改變state中useName的值，Main組件中的state.userName的值也會跟著更新，這種改變方式很好理解，接下來我們看下vuex推薦的狀態改變方式

六、vuex推薦的狀態改變方法

在store.js中新建一個mutations，存放被修改的狀態

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

其中第一個參數 state 就是 $store.state，第二個參數 msg 需要另外傳入，這個參數我們通過Header.vue的點擊事件中的方法來傳遞

Header.vue代碼：

<template>
  <div>
    <input type="text" v-model="msg" />
    <input type="button" v-on:click="setName" value="點我" />
  </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就收到了改變的狀態了，這就是一個vuex最基本的用法和作用

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。