本文介紹了寫給新手同學的vuex快速上手指北小結，分享給大家，具體如下

引入

//store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
  state: {...},mutations: {...},actions: {...}
})

export default store

 
//main.js
...
import store from './store'
Vue.prototype.$store = store
const app = new Vue({
  store,...
})
...

//test.vue 使用時：
import {mapState,mapMutations} from 'vuex'

State篇

state更新實時渲染是基於==computed==這個計算屬性的,直接賦給data只能賦值初始值，不會隨著state改變實時渲染

<!--state改變不會實時渲染-->
export default {
  data() {
   return {
   name:this.$store.state.name,};
  },}

<!--監聽state改變重新渲染檢視-->
<template>
  <div>
    {{name}}
  </div>
<template>
export default {
  computed: {
   name() {
   return this.$store.state.name;
   }
  },}

注意： data中的變數如果和computed中的變數重名,data優先，注意命名

獲取多個state值，寫多個函式return,很繁瑣，所以有==mapState==輔助函式

<!--取多個很冗餘,繁瑣-->
export default {
  computed: {
   token(){
   return this.$store.state.token;
   }，
   name(){
   return this.$store.state.name;
   }
  },}

<!--mapState 直接取出-->
import { mapState } from 'vuex'
export default {
  computed: mapState([
   'token'，
   'name'
  ])
}

我們有區域性計算，怎麼和mapState一起用？

import { mapState } from 'vuex'
export default {
  computed:{
    getTime(){
      return 123;
    },...mapState([
     'token'，
     'name'
    ])
  }
}

我們為它起個別名

<template>
  <div>
    xiaokeai,dahuilang是我們取的別名
    token,name是state的值
    {{xiaokeai}}
  </div>
<template>
<script>
  import { mapState } from 'vuex'
  export default {
    computed:{
      ...mapState({
        xiaokeai:"token",dahuilang:"name",})
    }
  }
</script>

我們要state和data發生點什麼

<template>
  <div>
    假如token的值123;
    balabala的值就是 123皮卡皮
    {{balabala}}
  </div>
<template>
<script>
  import { mapState } from 'vuex'
  export default {
    data(){
      return {
        pikaqiu:"皮卡皮卡"
      }
    }
    computed:{
      ...mapState({
        xiaokeai:"token",// 為了能夠使用 `this` 獲取區域性狀態，使用一個自定義名字的函式
        balabala(state){
          return state.token + this.pikaqiu;
        }
      })
    }
  }
</script>

取個物件值怎麼破？

<template>
 <div>
 {{daSon}}
 {{xiaoSon}}
 </div>
</template>
<script>
  import { mapState } from 'vuex'
  export default {
    data(){
      return {
        pikaqiu:"皮卡皮卡"
      }
    }
    computed:{
      ...mapState({
  daSon: state=>state.obj.yeye.baba.daSon,xiaoSon:state=>state.obj.yeye.baba.xiaoSon,})
    }
  }
</script>

這種方式取物件寫到業務裡不直觀,也不共用,下節==Getter==有更優的方案

Getter篇

Getter是針對state的【物件】值提前做一些處理，以便用的時候直接提取

可以 this.$store.getters.xxx 使用,也可以使用mapGetters輔助函式，==輔助函式注意：== 和state一樣，注入在computed中

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
 state: {
 obj: {
  yeye: {
  baba: {
   daSon: "老大",xiaoSon: "老二"
  }
  }
 }
 },getters: {
    <!--將想要提取或者處理的值這裡處理好-->
 getson: state => {
  return state.obj.yeye.baba;
 }
 }
})

export default store

<!--用的時候,和state一樣，也可以別名等等操作-->
<template>
 <div>
    {{getson}}
 </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
 computed: {
  ...mapGetters([
    getson
  ])
 }
}
</script>

Mutation篇

操作： this.$store.commit("名字","值");

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
 state: {
 token: "vuex的token",},mutations: {
 setToken(state,val) {
  state.token = val;
 }
 }
})

export default store

mapMutations 輔助函式，和state一樣，可以別名， ==注意：== 輔助函式注入在methods中

 methods: {
  ...mapMutations([
   'setToken'
  ])
 }
 
 <!--使用-->
 this.setToken(100); //token修改為100

Mutation 必須是同步函式，不要誤解這句話，以為非同步不能用，非同步可以用在裡面，檢視的渲染，取值都沒有問題，問題在於：除錯的時候，一些瀏覽器除錯外掛不能正確監聽state。所以方便除錯，儘量將非同步寫入action中

Action篇

注意action的 引數不是 state,而是context，context裡面包含commit,state。基本操作：this.$store.dispatch("函式名","值")

const store = new Vuex.Store({
 state: {
  count: 0
 },mutations: {
  increment (state) {
   state.count++
  }
 },actions: {
  increment (context) {
   context.commit('increment')
  }
 }
})

<!--輔助函式操作 注入在methods中-->
import { mapActions } from 'vuex'

export default {
 methods: {
  ...mapActions([
    "increment"
  ])
 }
}

<!--使用-->
this.increment(123);

module篇

module 目的將store按功能拆分成多個檔案，利於維護管理，module 分為2種情況，1.是有名稱空間， 2.是沒有名稱空間

沒有名稱空間： action、mutation 和 getter 是註冊在全域性的，所以要注意，方法函式不要設定同名了，如果同名了會都執行。
stete例外是區域性。

import Vue from 'vue';
import Vuex from 'vuex';
import moduleA from "./modules/cat.js";
Vue.use(Vuex);
const store = new Vuex.Store({
 state: {
 token: "vuex的token",modules:{
 moduleA
 }
})

export default store;

<!--moduleA.js-->
export default {
 // namespaced: true,state: {
  cat:"我是cat",mutations: { 
 setCat(state,val) {
  state.cat = val;
 } 
 },actions: { 
   
 },getters: { 
   
 }
};

無名稱空間 取值

this.$store.state.moduleA.cat
或者
...mapState({
 cat:state=>state.moduleA.cat,}),不可以(state是區域性，不可以這麼取)：
...mapState([
  "cat"
]),

無名稱空間 改變值

和原來一樣，因為方法是註冊在全域性的
this.$store.commit("setCat",666);
或者
...mapMutations([
 "setCat"
])

有名稱空間： state,action、mutation 和 getter 是區域性的，模組間命名互相不衝突，可以重名。
namespaced 設定為true,即可開啟

<!--moduleA.js 檔案-->
export default {
 namespaced: true,}
}

有名稱空間取值

this.$store.state.moduleA.cat

或者
<!--注意這裡：名稱空間的名字帶上，在modules註冊時候呢個key值-->
<!--也可以別名，方法和之前一樣，就是第一個引數是空間名-->
...mapState("moduleA",[
  "cat"
])

有名稱空間 改變值

<!--只是第一個引數是空間名，其他操作一樣-->
...mapMutations("moduleA",[
 "setCat"
])
this.setCat(888);

或者：

this.$store.commit("moduleA/setCat",666);

最後 plugins

vuex頁面重新整理會丟失資料，用vuex-persistedstate外掛可解決

import createPersistedState from "vuex-persistedstate";

const store = new Vuex.Store({
 state: {},mutations: {},actions: {},getters: {},modules:{},plugins: [
    createPersistedState({
      storage: window.sessionStorage
    })
  ]
})

export default store

到此這篇關於寫給新手同學的vuex快速上手指北小結的文章就介紹到這了,更多相關vuex快速上手內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！