Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式。它採用集中式儲存管理應用的所有元件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。

前言

vuex的執行流程

元件通過dispatch呼叫action，action通過commit來觸發mutation，mutation來負責修改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,//嚴格模式，防止直接修改state（效能很差，釋出時改為false）
 state:{
 a:1,b:2
 },mutations:{
 addA(state,val){
  state.a+=val;
 },addB(state,val){
  state.b+=val;
 }
 },actions:{
 addA({commit},val){
  //呼叫mutations中的addA()
  commit('addA',val);
 },addB({commit},val){
  //呼叫mutations中的addB()
  commit('addB',val);
 }
 },//相當於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/>'
})

使用

對映關係

mapState > computed

mapGetters > computed

mapMutations > methods

mapActions > methods

State和mapState

state是vuex的核心，是統一存放資料的地方。

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

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

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

mapState

<template>
 <div>
  a:{{a}}
  <br>
  b:{{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來觸發mutation。

不推薦直接呼叫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去觸發mutation，雖然比較麻煩。

action支援非同步，mutation只能同步。

通過$store.dispatch來觸發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

當系統比較龐大時，store會變得非常臃腫。

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

每個模組擁有自己的 state、mutation、action、getter、甚至是巢狀子模組。

補充知識：向vuex儲存資料和獲取資料-和直接呼叫actions.js中的非同步方法

向vuex的變數儲存資料

1.在state.js中新增 userInfo: {},

2.actions.js中新增同步使用者資訊-將引數userInfo傳遞給USER_INFO

建立一個方法-不用非同步方法

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

3.建立一箇中間變數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.外界直接呼叫actions.js中的方法 syncUserInfo

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

向vuex中獲取資料

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

2.計算屬性

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

直接呼叫vuex-中 actions.js的非同步方法--

this.$store.dispatch

created(){
  // 呼叫vuex-actions中的方法-剛進入app，就需要驗證登入的時效性
  this.$store.dispatch('getUserInfo')
},

actions.js

// 7. 非同步獲取使用者資訊
async getUserInfo({commit}){
 const result = await getUserInfo(); // actions中呼叫getUserInfo方法---需要引入import
 console.log(result);
 if(result.success_code === 200){
   commit(USER_INFO,{userInfo: result.message});
 }
},

actions中呼叫getUserInfo方法---需要引入

import {
 getUserInfo,} from '../api'
----------------------
api-index.js
// 2.9 獲取登入的使用者資訊
export const getUserInfo = () => ajax(BASE_URL + '/api/user_info');

以上這篇vuex存取值和對映函式使用說明就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。