vuex存取值和映射函數(shù)使用說明

更新時間：2020年07月24日 10:35:24 作者：程序員小潘

這篇文章主要介紹了vuex存取值和映射函數(shù)使用說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

Vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。

前言

vuex的執(zhí)行流程

組件通過dispatch調(diào)用action，action通過commit來觸發(fā)mutation，mutation來負(fù)責(zé)修改state，state修改后去重新渲染受影響的dom。

安裝和引入

1、安裝

npm install vuex -S

2、引入

新建：store/index.js。

import vue from 'vue';
import Vuex from 'vuex';

vue.use(Vuex);

export default new Vuex.Store({
 strict:true,//嚴(yán)格模式，防止直接修改state（性能很差，發(fā)布時改為false）
 state:{
 a:1,
 b:2
 },
 mutations:{
 addA(state,val){
  state.a+=val;
 },
 addB(state,val){
  state.b+=val;
 }
 },
 actions:{
 addA({commit},val){
  //調(diào)用mutations中的addA()
  commit('addA', val);
 },
 addB({commit},val){
  //調(diào)用mutations中的addB()
  commit('addB', val);
 }
 },
 //相當(dāng)于computed
 getters:{
 getA(state){
  return state.a;
 },
 getB(state){
  return state.b;
 },
 count(state){
  return state.a + state.b;
 }
 },
 modules:{

 }
});

3、掛載

import store from './store';

new Vue({
 el: '#app',
 store,
 components: { App },
 template: '<App/>'
})

使用

映射關(guān)系

mapState > computed

mapGetters > computed

mapMutations > methods

mapActions > methods

State和mapState

state是vuex的核心，是統(tǒng)一存放數(shù)據(jù)的地方。

從store中獲取值。（不推薦）

<template>
 <div>
  a:{{$store.state.a}}
  <br>
  b:{{$store.state.b}}
 </div>
</template>

官方推薦通過computed來獲取，但是如果需要獲取多個值就會很麻煩。

mapState

<template>
 <div>
  a:{{a}}
  <br>
  b:{}
 </div>
</template>

<script>
 import {mapState} from 'vuex';
 export default {
  name: "MapState",
  computed:{
   //將store.state中的屬性映射到computed
   ...mapState(['a','b'])
  }
 }
</script>

getters和mapGetters

獲取getters中的值。

<div>
 a:{{$store.getters.getA}}
 <br>
 b:{{$store.getters.getB}}
 <br>
 a+b={{$store.getters.count}}
</div>

使用mapGetters映射。

<template>
 <div>
  a={{getA}}
  <br>
  b={{getB}}
  <br>
  a+b={{count}}
 </div>
</template>

<script>
 import {mapGetters} from 'vuex';
 export default {
  name: "MapGetters",
  computed:{
   //將store.getters映射到computed
   ...mapGetters(['getA','getB','count'])
  }
 }
</script>

mutations和mapMutations

通過$store.commit來觸發(fā)mutation。

不推薦直接調(diào)用mutation來修改。

<template>
 <div>
  a={{$store.state.a}}
  <br>
  b={{$store.state.b}}
  <br>
  a+b={{$store.getters.count}}
  <hr>
  <button @click="$store.commit('add',5)">a+5</button>
 </div>
</template>

使用mapMutations映射。

<template>
 <div>
  a={{$store.state.a}}
  <br>
  b={{$store.state.b}}
  <br>
  a+b={{$store.getters.count}}
  <hr>
  <button @click="addA(5)">a+5</button>
 </div>
</template>

<script>
 import {mapMutations} from 'vuex';
 export default {
  name: "MapMutations",
  methods:{
   //將store.mutations映射到methods
   ...mapMutations(['addA'])
  }
 }
</script>

actions和mapActions

官方推薦通過action去觸發(fā)mutation，雖然比較麻煩。

action支持異步，mutation只能同步。

通過$store.dispatch來觸發(fā)action。

<button @click="$store.dispatch('addA',5)">a+5</button>

使用mapActions映射。

<template>
 <div>
  a={{$store.state.a}}
  <br>
  b={{$store.state.b}}
  <br>
  a+b={{$store.getters.count}}
  <hr>
  <button @click="$store.dispatch('addA',5)">a+5</button>
 </div>
</template>

<script>
 import {mapActions} from 'vuex';
 export default {
  name: "MapActions",
  methods:{
   //將store.actions映射到methods
   ...mapMutations(['addA'])
  }
 }
</script>

Modules

當(dāng)系統(tǒng)比較龐大時，store會變得非常臃腫。

為了方便store的模塊化管理，Vuex 允許我們將 store 分割成 modules。

每個模塊擁有自己的 state、mutation、action、getter、甚至是嵌套子模塊。

補(bǔ)充知識：向vuex存儲數(shù)據(jù)和獲取數(shù)據(jù)-和直接調(diào)用actions.js中的異步方法

向vuex的變量存儲數(shù)據(jù)

1.在state.js中添加 userInfo: {},

2.actions.js中添加同步用戶信息-將參數(shù)userInfo傳遞給USER_INFO

創(chuàng)建一個方法-不用異步方法

syncUserInfo({commit}, userInfo){
  commit(USER_INFO, {userInfo});
},

3.創(chuàng)建一個中間變量mutation-types.js

export const USER_INFO = 'user_info';

4.在actions.js中引入變量-USER_INFO

 import {
  USER_INFO
 } from './mutation-types'

5.在mutations.js中引入變量

 import {
  USER_INFO
 } from './mutation-types'

將userInfo賦值給state

[USER_INFO](state, {userInfo}) {
 state.userInfo = userInfo;
 },

6.外界直接調(diào)用actions.js中的方法 syncUserInfo

 import {mapActions} from 'vuex'
 methods: {
  // 存到vuex-是個方法。需要...延展符展開
  ...mapActions(['syncUserInfo']),
 }

向vuex中獲取數(shù)據(jù)

1.引入 import {mapState} from 'vuex';

2.計算屬性

computed:{
 ...mapState(['userInfo'])
},

直接調(diào)用vuex-中 actions.js的異步方法--

this.$store.dispatch

created(){
  // 調(diào)用vuex-actions中的方法-剛進(jìn)入app，就需要驗證登錄的時效性
  this.$store.dispatch('getUserInfo')
},

actions.js

// 7. 異步獲取用戶信息
async getUserInfo({commit}){
 const result = await getUserInfo(); // actions中調(diào)用getUserInfo方法---需要引入import
 console.log(result);
 if(result.success_code === 200){
   commit(USER_INFO, {userInfo: result.message});
 }
},

actions中調(diào)用getUserInfo方法---需要引入

import {
 getUserInfo,
} from '../api'
----------------------
api-index.js
// 2.9 獲取登錄的用戶信息
export const getUserInfo = () => ajax(BASE_URL + '/api/user_info');

以上這篇vuex存取值和映射函數(shù)使用說明就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: