vuex裏mapState,mapGetters使用詳解

1、基本用法

1. 初始化並建立一個項目

1 2 3

vue init webpack-simple vuex-demo cd vuex-demo npm install

2. 安裝 vuex

1	npm install  vuex -S

3. 在 src 目錄下建立 store.js 文件，並在 main.js 文件中導入並配置

store.js 中寫入

1 2 3 4

import Vue from 'vue' //引入 vuex 並 use import Vuex from 'vuex' Vue.use(Vuex)

main.js 文件

1 2 3 4 5 6 7 8 9 10

import Vue from 'vue' import App from './App.vue' import store from './assets/store'  //導入 store 對象   new  Vue({   //配置 store 選項，指定爲 store 對象，會自動將 store 對象注入到全部子組件中，在子組件中經過 this.$store 訪問該 store 對象   store,   el: '#app' ,   render: h => h(App) })

4. 編輯 store.js 文件

在應用 vuex 以前，咱們仍是須要看懂這個流程圖，其實很簡單。

vuex

① Vue Components 是咱們的 vue 組件，組件會觸發（dispatch）一些事件或動做，也就是圖中的 Actions；
② 咱們在組件中發出的動做，確定是想獲取或者改變數據的，可是在 vuex 中，數據是集中管理的，咱們不能直接去更改數據，因此會把這個動做提交（Commit）到 Mutations 中；
③ 而後 Mutations 就去改變（Mutate）State 中的數據；
④ 當 State 中的數據被改變以後，就會從新渲染（Render）到 Vue Components 中去，組件展現更新後的數據，完成一個流程。

Vuex 的核心是 Store（倉庫），至關因而一個容器，一個 Store 實例中包含如下屬性的方法：

state 定義屬性（狀態 、數據）

store.js 中寫入

1 2 3 4 5 6 7 8 9 10 11

// 定義屬性（數據） var  state = {   count:6 } // 建立 store 對象 const store = new  Vuex.Store({   state })   // 導出 store 對象 export default  store;

方式一、 在 app.vue 中就能經過 this.$store 訪問該 store 對象 ，獲取該 count 。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<template>   <div id= "app" >   //把 count 方法直接寫入，可本身執行   <h1>{{count}}</h1>   </div> </template>   <script> export default  {   name: 'app' ,   computed:{   count(){    //返回獲取到的數據    return  this .$store.state.count   }   } } </script>

方式二、vuex 提供的 mapGetters 和 mapActions 來訪問

mapGetters 用來獲取屬性（數據）

① 在 app.vue 中引入 mapGetters

1	import {mapGetters} from 'vuex'

② 在 app.vue 文件的計算屬性中調用 mapGetters 輔助方法，並傳入一個數組，在數組中指定要獲取的屬性  count

1 2 3 4 5 6 7 8 9 10

<script> import {mapGetters,mapActions} from 'vuex' export default  {   name: 'app' ,   computed:mapGetters([   //此處的 count 與如下 store.js 文件中 getters 內的 count 相對應   'count'   ]) } </script>

③ 在 store.js 中定義 getters 方法並導出

getters 用來獲取屬性

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex)   // 定義屬性（數據） var  state = {   count:6 } // 定義 getters var  getters={   //須要傳個形參，用來獲取 state 屬性   count(state){    return  state.count   } } // 建立 store 對象 const store = new  Vuex.Store({   state,   getters })   // 導出 store 對象 export default  store;

這樣頁面上就會顯示傳過來的數據了！接下來咱們來經過動做改變獲取到的數據

④在 store.js 中定義 actions 和 mutations 方法並導出

actions 定義方法（動做）,可使異步的發送請求。

commit 提交變化，修改數據的惟一方式就是顯示的提交 mutations

mutations 定義變化，處理狀態（數據）的改變

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43

import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex)   // 定義屬性（數據） var  state = {   count:6 }   // 定義 getters var  getters={   count(state){    return  state.count   } }   // 定義 actions ，要執行的動做，如流程的判斷、異步請求 const actions ={   // ({commit,state}) 這種寫法是 es6 中的對象解構   increment({commit,state}){    //提交一個名爲 increment 的變化，名字可自定義，能夠認爲是類型名，與下方 mutations 中的 increment 對應    //commit 提交變化，修改數據的惟一方式就是顯式的提交 mutations    commit( 'increment' )   } }   // 定義 mutations ，處理狀態（數據） 的改變 const mutations ={   //與上方 commit 中的 ‘increment' 相對應   increment(state){    state.count ++;   } } // 建立 store 對象 const store = new  Vuex.Store({   state,   getters,   actions,   mutations })   // 導出 store 對象 export default  store;

⑤ 在 app.vue 中引入 mapActions ，並調用

mapActions 用來獲取方法（動做）

1	import {mapGetters,mapActions} from 'vuex'

調用 mapActions 輔助方法，並傳入一個數組，在數組中指定要獲取的方法 increment

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<template>   <div id= "app" >   //這個 increment 方法與下面 methods 中的 increment 相對應   <button @click= "increment" >增長</button>   <button>減小</button>   <h1>{{count}}</h1>   </div> </template>   <script> import {mapGetters,mapActions} from 'vuex' export default  {   name: 'app' ,   computed:mapGetters([   'count'   ]),   methods:mapActions([   //該 increment 來自 store.js 中導出的 actions 和 mutations 中的 increment   'increment' ,   ]) } </script>

這樣就能經過 button 來改變獲取到的 count 了。

看起來確實是挺繞的，須要在理解了原理的狀況下，再細細琢磨，加深理解。

以上就是本文的所有內容，但願對你們的學習有所幫助，也但願你們多多支持腳本之家。

您可能感興趣的文章:

• 分分鐘學會vue中vuex的應用（入門教程）
• Vuex簡單入門
• Vue.js實戰之Vuex的入門教程

 

原文連接：https://www.jianshu.com/p/b014ff74bdb6

 

/*getter是state的get方法，沒有get頁面就獲取不到數據

獲取頁面:
import {mapGetters,mapActions} from 'vuex'
 <h1>{{count}}</h1>
computed:mapGetters([
 'count'
 ]),

store.js:

var state = {
 count:6
},
var getters={
 count(state){
  return state.count
 }
}

改變數據頁面：
<button @click="increment">增長</button>
methods:mapActions([
 //該 increment 來自 store.js 中導出的 actions 和 mutations 中的 increment 
 'increment',
 ])

先發給action:
const actions ={
 // ({commit,state}) 這種寫法是 es6 中的對象解構
 increment({commit,state}){
  //提交一個名爲 increment 的變化，名字可自定義，能夠認爲是類型名，與下方 mutations 中的 increment 對應
  //commit 提交變化，修改數據的惟一方式就是顯式的提交 mutations
  commit('increment') 
 }
}
再發給mutations:
const mutations ={
 //與上方 commit 中的 ‘increment' 相對應
 increment(state){
  state.count ++;
 }
}
*/