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

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

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

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

文章目錄

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

Vuex的簡介

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

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

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

Vuex的安裝

下面我們創(chuàng)建Vue項目

創(chuàng)建的目錄如下所示。

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

引入 Vuex掛載到vue對象

先通過官方提供的一個計數(shù)器的示例來引入 Vuex 的使用，具體實現(xiàn)步驟如下，在 src 文件夾下新建 store 文件夾，意思為數(shù)據(jù)倉庫，里面存放了整個項目需要的共享數(shù)據(jù)，在 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方法觸發(fā)actions里面的countAdd方法，然后actions提交mutations里面的countAdd方法。actions: {//接收組件傳過來的參數(shù)num，Action 函數(shù)接受一個與 store 實例具有相同方法和屬性的 context 對象countAdd(context,num){context.commit('countAdd',num)}},mutations: {//傳入一個state對象，接收傳過來的參數(shù)numcountAdd(state,num){state.count+=num}} })

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

index.js //存儲狀態(tài) 并建立依賴關系 actions.js //觸發(fā)mutations中的方法 請求數(shù)據(jù)寫在這里 getters.js //狀態(tài)獲取邏輯 mutations.js //操作邏輯

創(chuàng)建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/>' })

執(zhí)行npm run dev跑起來

兄弟組件

Vuex的作用就是在兄弟組件共享數(shù)據(jù)。

下面新建組件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 {//我們不再將數(shù)據(jù)放到組件里//count: 0}},//通過計算屬性來獲得countcomputed: {count: function(){//通過vue的this.$store來獲得statereturn this.$store.state.count}},methods: {handleClick:function(num){//通過dispatch觸發(fā)actions中的方法countAdd，actions提交mutations，num是攜帶的參數(shù)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觸發(fā)actions中的方法countAdd，actions提交mutations，num是攜帶的參數(shù)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直接是沒有介紹的，其實我在創(chuàng)建項目的時候選擇了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有了更加清楚的理解了。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。