@Author：Runsen
@Date：2020/7/12

人生最重要的不是所站的位置，而是內心所朝的方向。只要我在每篇博文中寫得自己體會，修煉身心；在每天的不斷重復學習中，耐住寂寞，練就真功，不畏艱難，奮勇前行，不忘初心，砥礪前行，人生定會有所收獲，不留遺憾 （作者：Runsen ）

作者介紹：Runsen目前大三下學期，專業化學工程與工藝，大學沉迷日語，Python， Java和一系列數據分析軟件。導致翹課嚴重，專業排名中下。.在大學60%的時間，都在CSDN。決定今天比昨天要更加努力。我的征途是星辰大海！

今天，我們開始了Vuex的學習。Vuex用白話來說，就是幫我們存儲一下多個組件共享的數據，方便我們對其讀取和更改。

文章目錄

• Vuex的簡介
• Vuex的安裝
• 引入 Vuex掛載到vue對象
• 兄弟組件
• 路由編寫

Vuex的簡介

Vuex 是專門為 Vue.js 設計的狀態管理庫，它集中存儲，管理所有組件的狀態；通過前面的學習，我們知道父組件要把值傳遞給子組件的時候，可以通過 props 來傳遞，子組件要把值傳遞給父組件的時候，可以通過事件的形式來實現，而對于兄弟組件來說，就需要用到 Vuex 來實現了。也就是一個組件把值放入到 Vuex 中，另一個組件從中取值從而實現參數傳遞的效果。

Vuex的五大特性：狀態state、計算屬性getter、同步行為mutation、異步行為action、模塊module

• state：用于存儲數據，類似vue實例的data屬性。
• mutations：用于遞交更改，對state對象中的屬性數據進行更改。
• actions：用于進行遞交異步更改，通過調用mutations實現對數據的更改。
• getters：可以認為是store的計算屬性;與計算屬性一樣,getter的返回值會根據它的依賴緩存起來,且只有當它的依賴值發生變化才會被重新計算
• mapGetters：輔助函數，將 store 中的 getter 映射到局部計算屬性：
• module：將 store 分割成模塊（module）。每個模塊擁有自己的 state、mutation、action、getter、甚至是嵌套子模塊——從上至下進行同樣方式的分割

Vuex的安裝

下面我們創建Vue項目

創建的目錄如下所示。

下面要執行npm install vuex --save 命令安裝 Vuex，要注意的是這里一定要加上 –save，因為你這個包我們在生產環境中是要使用的。

引入 Vuex掛載到vue對象

先通過官方提供的一個計數器的示例來引入 Vuex 的使用，具體實現步驟如下，在 src 文件夾下新建 store 文件夾，意思為數據倉庫，里面存放了整個項目需要的共享數據，在 store 下新建 index.js

index.js代碼如下。

import Vue from 'vue' import Vuex from 'vuex' //使用vuex Vue.use(Vuex) //導出store export default new Vuex.Store({state: {count: 0},//組件通過dispatch方法觸發actions里面的countAdd方法，然后actions提交mutations里面的countAdd方法。actions: {//接收組件傳過來的參數num，Action 函數接受一個與 store 實例具有相同方法和屬性的 context 對象countAdd(context,num){context.commit('countAdd',num)}},mutations: {//傳入一個state對象，接收傳過來的參數numcountAdd(state,num){state.count+=num}} })

這里順便主要介紹下store文件夾中的四個js文件。

index.js //存儲狀態 并建立依賴關系 actions.js //觸發mutations中的方法 請求數據寫在這里 getters.js //狀態獲取邏輯 mutations.js //操作邏輯

創建Vuex的實例 new Vuex.store()，然后再main.js將vuex實例掛載到vue對象。接下來，在main.js中引入store，這里我導入了router，router在下篇文章中介紹。

下面就是main.js代碼

// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import store from './store/index' // 引入store import router from './router'import App from './App'Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({el: '#app',store,router,components: { App },template: '<App/>' })

執行npm run dev跑起來

兄弟組件

Vuex的作用就是在兄弟組件共享數據。

下面新建組件Child1.vue，代碼如下。

<template><div class="child-1"><p>Child1:{{count}}</p><button @click="handleClick(1)">Child1-Add</button></div> </template><script> export default {name: 'Child1',data () {return {//我們不再將數據放到組件里//count: 0}},//通過計算屬性來獲得countcomputed: {count: function(){//通過vue的this.$store來獲得statereturn this.$store.state.count}},methods: {handleClick:function(num){//通過dispatch觸發actions中的方法countAdd，actions提交mutations，num是攜帶的參數this.$store.dispatch('countAdd',num)}} } </script> <style scoped> </style>

下面新建組件Child2.vue，代碼如下。

<template><div class="child-2"><p>Child2:{{count}}</p><button @click="handleClick(10)">Child2-Add</button></div> </template><script> export default {name: 'Child2',data () {return {//count: 0}},//通過計算屬性來獲得countcomputed: {count: function(){//通過vue的this.$store來獲得statereturn this.$store.state.count}},methods: {handleClick:function(num){//通過dispatch觸發actions中的方法countAdd，actions提交mutations，num是攜帶的參數this.$store.dispatch('countAdd',num)}} } </script> <style scoped></style>

最后，新建組件Parent.vue，然后在路由中引過去，指定上面的兩個components。

<template><div class="parent"><child-1></child-1><child-2></child-2></div> </template><script> import Child1 from './Child1' import Child2 from './Child2' export default {name: 'Parent',data () {return {}},components: {Child1,Child2} } </script><!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> </style>

路由編寫

關于router直接是沒有介紹的，其實我在創建項目的時候選擇了router路由。路由就是指定路徑和組件的，index代碼如下。

import Vue from 'vue' import Router from 'vue-router' import Parent from '@/components/Parent'Vue.use(Router)export default new Router({routes: [{path: '/',name: 'Parent',component: Parent}] })

下面就是最終的目錄模塊。

最終效果就是點擊第一個按鈕加一，第二個加10的效果。

相信寫到這里，我i應該對vuex有了更加清楚的理解了。

總結

以上是生活随笔為你收集整理的四十二、开始Vuex的学习：如何在Vue中使用Vuex的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。