剛入手vue的前端小白 總結下 vuex的使用(請大神多指點)

日常一樣 上面先來一段 火星文 反正看的人不多 但這東西吧 讀者可以選擇不看 但你不能沒有
vuex 是什麼呢？
Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的所有組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。Vuex 也集成到 Vue 的官方調試工具 devtools extension，提供了諸如零配置的 time-travel 調試、狀態快照導入導出等高級調試功能。
上面寫完 我自己都不知道是什麼意思，還是老老實實 做一個代碼的搬運工吧

1.日常腳手架中使用 vuex 像我這種菜鳥級別 應該就是下面的這種情況
// 先整一個文件 定義好 vuex 的一些信息

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
	  count:0
  },
  getters:{
	count(state){
		return state.count;
	}  
  },
  mutations: {
	  add(state,value){
		  state.count=state.count+value;
	  }
  },
  actions: {
	  setCount({state,commit},value){
		  commit('add',value);
	  }
  },
  modules: {
  }
})

2.但是 菜鳥覺得 數據少還可以 多的話 都放到一個文件夾好像 不太好 菜鳥都覺得不好 各位大佬肯定 早都優化好了
在store 文件夾下 創建 四個文件夾 看來好看 是吧 其實我也不知道怎麼這樣寫 只是覺得好管理吧 畢竟剛入手

然後就是把 index.js文件在動一動 裏面的東西都拿出來了
// 爲啥 菜鳥博主 把 module 去掉了呢 因爲本博主認爲哈 module拿東西 一般是大項目採用 像我這種菜鳥 一般碰不到什麼大項目 這輩子感覺無緣了 畢竟這輩子都進不了大廠 就打算在小公司混混日子就行了

import Vue from 'vue'
import Vuex from 'vuex'
import state from "./state"
import mutations from './mutations'
import actions from "./actions"
import getters from './getters'
Vue.use(Vuex)

export default new Vuex.Store({
  state,
  getters,
  mutations,
  actions
})

state.js

const state={
	count:0
}
export default state;

getters.js

const getters={
	count(state){
		return state.count;
	}
}
export default getters;

mutations.js

const mutations={
	add(state,value){
		state.count=state.count+value;
	}
}

export default mutations;

actions.js

const actions={
	setCount({state,commit},value){
		commit('add',value);
	}
}

export default actions;

然後就是 很重要的部分了 使用 在組件中使用

<template>
	<div id="app">
		{{count}}
		<button @click="add">增加+2</button>
	</div>
</template>
<script>
  import axios from "axios";
    export default {
      data() {
        return {
          count:this.$store.state.count
        };
      },
      methods: {
		add(){
			setTimeout(()=>{
				this.$store.dispatch('setCount',2);
			},1000)
		}
      }
    }
</script>

問題是 當我們點擊的時候好像並不會+2 這個是因爲 我們 第一次賦值給data中的數據之後 他就不會再 改變了 這個時候我們可以把它放到我們的計算屬性中

computed:{
	count(){
		return this.$store.state.count;
	}  
  },

然後就可以 監聽 了 一旦 我們的vuex中的數據發生變化 就可以 觸發 頁面上的改變了
但這個時候 又來了一個新的問題 一旦 我們vuex中的數據 越來越多怎麼辦 一個一個綁在 計算屬性中嗎 那樣 好像也不是太好

好了再一次優化 使用 vuex中的輔助函數
mapState 算是一種對vuex中的state的一種映射吧

 import {mapState,mapMutations,mapActions} from "vuex"

computed:{
	 ...mapState({
		 count:'count'
	 })
 },
 不想寫對象的形式 也可以寫成數組
 computed:{
	 ...mapState(['count'])  // 同時 也不影響你再增加其他的計算屬性
 },

當然 除了mapState其他的我們也可以使用
mapActions 相當於把vuex中的actions對象中方法 註冊到 當前組件中

 methods: {
		...mapActions(['setCount']),
		add(){
			setTimeout(()=>{
				this.setCount(2);
			},1000)
		}
    }
當然 你也可以給方法起別名
methods: {
	...mapActions({
		myCount:'setCount'   // 起別名 得是對象形式的哦
	}),
	add(){
		setTimeout(()=>{
			this.myCount(2);
		},1000)
	}
     }

mapMutations 用法差不多 就不一一贅述了哦

好了 很佩服能把vuex 玩的 很轉的大神 我在裏面穿來穿去 就暈了 不知道 數據去哪了
這個時候怎麼辦了 小白推薦大家安裝一個 vue-detools 調試工具 時刻跟蹤 vuex的狀態值 不讓你那麼 暈乎
之前有安裝教程 歡迎查看 小白 那篇博客
https://blog.csdn.net/yunchong_zhao/article/details/104311448