Vuex的使用，絕對簡單的講解，看完就會

Vuex是什麼？

官方解釋為，Vuex 是一個專為 Vue.js 應用程式開發的狀态管理模式。簡單點說，我認為Vuex就是為定義全局變量全局函數而生的東西。

如何使用

一般在vue項目中會有這樣的檔案夾

接下來講一下這些檔案的作用，modules這裡一般存儲所有的方法，建立了檔案需要在index.js裡聲明一下，getters.js是get方法，用于擷取vuex下變量的值

廢話不多說，具體如何使用如何編寫，上代碼

首先，這個檔案夾要生效，就需要聲明到main.js裡。

main.js

import store from './store'

new Vue({
	store,
})
           

然後是index.js，這裡就随便舉個例子，之後要注冊就和這裡user的寫法相似就行，先import聲明然後vuex.store中調用

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import getters from './getters'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    user,
  },
  getters
})

export default store
           

緊接着就是modules檔案夾下的檔案寫法，這裡以user為例

modules/user.js

const user = {
	state: {//聲明全局參數
		user:''
	},
	mutations: {//set方法,存儲時使用--->>this.$store.commit('SET_USER',值)
		SET_USER(state,user){
			state.user = user
		}
	},
	//getters: {},//get方法,一般不用,在getters檔案中聲明即可
	actions: {//全局函數
		GetInfo({ commit, state }) {
			return new Promise((resolve, reject) => {
				//一般調用接口請求
				getInfo(state.token).then(res => {
					commit('SET_USER', res.user)
					resolve(res)//傳遞出去的參數,傳遞多個可用數組eg:resolve([res.user,res.code])
				}).catch(error => {
					reject(error)
				})
			})
		},
	},
	//modules:{}//引入其他的modules,一般在index中使用
}
export default user
           

最後，就是getters.js檔案，這個檔案主要是擷取變量的值，具體調用$store.getters.user

getters.js

const getters = {
	user: state => state.user.user,
}
export default getters
           

store下的檔案說完了，接下來就是如何調用的問題了

Vuex内變量和函數的調用

一、在元件中調用

1、擷取值和函數

方法一

擷取值：

取在getters.js檔案中聲明過的

this.$store.getters.user
           

如果沒在getters.js中聲明過，可以通過這種方法直接擷取

this.$store.state.檔案名.變量名
例如：
this.$store.state.user.user
           

直接可以擷取變量值，如果在template下則去掉this.即可

調用函數：

this.$store.dispatch('函數名',傳入參數).then(傳來參數 => {})
例如：
this.$store.dispatch('GetInfo',傳入參數).then(res => {
	console.log(res)
})
           

方法二

//首先引入mapState和mapActions
import { mapState, mapActions } from "vuex";

computed: {
    // 利用輔助函數 擷取state中的資料
	...mapState("user", ["user"]),
},
methods: {
    // 輔助函數 來擷取actions中的方法
    ...mapActions("user", ["GetInfo"]),
}
           

聲明完後使用，變量直接this.user，函數直接this.GetInfo()，在template下則去掉this.即可

2、存入值

二、在js檔案中調用

首先引入store

然後調用

store.getters.user				//讀取getters下的變量值
store.state.檔案名.變量名		//讀取指定檔案下state下的變量的值
store.commit('SET_USER',值)		//存入值
store.dispatch('函數名',傳入參數).then(傳來參數 => {})	//action下函數調用
           

最後

最常用的vuex大概到這裡就結束了，使用谷歌vue插件可以更好的觀察vuex中變量的變化。附上vuex例子：vue動态路由實作

如有不對請評論糾正，看完點個贊再走吧