state、getter、mutation、action的使用

本文使用vue2/vuex

(1) store结构

(2) store/modules/login.js

 

(3) store/index.js

// 注：login为 store实例上modules的属性，若如下图modules:{aaa:login}则以上代码login应取aaa
// 方法一 mainjs 注册全局属性
/* import store from './store' // sotre文件路径
Vue.prototype.$store = store 
// 或
import store from './store' // sotre文件路径
new Vue({
store
})
*/
// state的使用
this.$store.state.login.token
// getter的使用
// this.$store.getters['命名空间/对应命名空间getters里的方法']
this.$store.getters['login/getToken']
// mutation的使用
// this.$store.commit('命名空间/对应命名空间mutation里的方法',载荷数据)
this.$store.commit('login/SET_TOKEN',111)
// action的使用
// this.$store.dispatch('命名空间/对应命名空间action里的方法')
this.$store.dispatch('login/setToken') // 组件中使用 例如method方法
// 方法二 局部引用
/* 组件上引用 import store from './store' sotre文件路径 */
// state的使用
store.state.login.token
// getter的使用
// store.getters['命名空间/对应命名空间getters里的方法']
store.getters['login/getToken']
// mutation的使用
// store.commit('命名空间/对应命名空间mutation里的方法',载荷数据)
store.commit('login/SET_TOKEN',111)
// action的使用
// store.dispatch('命名空间/对应命名空间action里的方法'，载荷数据) 
store.dispatch('login/setToken') // 组件中使用 例如method方法
// 方法三
import {  mapState，mapMutations，mapGetters，mapActions} from 'vuex'
export default {
	data() {
		return {	
		}
	},
	computed:{
	   // state的使用
	   // 方法一
	   // this.token1 =>this.$store.state.login.token
    	...mapState({
    		token1:state=>state.login.token  // 取token token1为别名
    	}),
    	// 方法二
    	 // this.aa =>this.$store.state.login.token
    	...mapState('login',{aa:'token'}) // 取token aa为别名
    	// 方法三
    	 // this.token =>this.$store.state.login.token
    	...mapState('login',['token'])
    	// 方法四
    	 // this.token2 =>this.$store.state.login.token
    	...mapState(’login‘，{
    		token2:state=>state.token  // 取token token2为别名
    	}),
    	// getter的使用
    	// this.getToken =》 this.$store.getters['login/getToken']
    	// 方法一
    	...mapGetters('login',['getToken']), 
    	// 方法二
		...mapGetters(['login/getToken'])
    },
	methods: {
	    // mutation的使用
	    // this.SET_TOKEN(pyload) =>this.$store.commit('login/SET_TOKEN')
	    ...mapMutations(’命名空间‘,['SET_TOKEN']),
		// mapActions(’命名空间‘，['对应命名空间action里的方法'])
		// this.setToken(pyload) => this.$store.dispatch('login/setToken')
		...mapActions(’login‘，['setToken']) 
	}
}
// 方法四
import { createNamespacedHelpers } from 'vuex'
const {  mapState,mapMutations,mapGetters,mapActions } = createNamespacedHelpers('login')
// 在方法三的基础上去掉命名空间的选项
export default {
	data() {
		return {	
		}
	},
	computed:{
	   // state的使用
	   // 方法一
	   // this.token1 =>this.$store.state.login.token
    	...mapState({
    		token1:state=>state.token  // 取token token1为别名
    	}),
    	// 方法二
    	 // this.aa =>this.$store.state.token
    	...mapState({aa:'token'}) // 取token aa为别名
    	// 方法三
    	 // this.token =>this.$store.state.login.token
    	...mapState(['token'])
    	// 方法四
    	 // this.token2 =>this.$store.state.login.token
    	...mapState({
    		token2:state=>state.token  // 取token token2为别名
    	}),
    	// getter的使用
    	// this.getToken =》 this.$store.getters['login/getToken']
    	// 方法一
    	...mapGetters(['getToken']), 
    	// 方法二
		...mapGetters(['getToken'])
    },
	methods: {
	    // mutation的使用
	    // this.SET_TOKEN(pyload) =>this.$store.commit('login/SET_TOKEN')
	    // ...mapMutations(’命名空间‘，['对应命名空间mutation里的方法']),
	    ...mapMutations(’login‘,['SET_TOKEN']),
		// mapActions(’命名空间‘，['对应命名空间action里的方法'])
		// this.setToken(pyload) => this.$store.dispatch('login/setToken')
		...mapActions(['setToken']) 
	}
}