Vuex每个属性的使用方式

State
创建

const state = {
    
    
	count: 0,
	sex: '男',
	from: '123',
	list: [
		{
    
    id: 1, name: 'ohhhh', bol: true},
		{
    
    id: 2, name: 'hoooo', bol: false}
	]
}
export default {
    
    
	state
}

调用

this.$store.state.test.count//1

import {
    
    mapState} from 'vuex'//2-1
computed: {
    
    
	...mapState({
    
    
		from: function(state) {
    
    
			return state.test.from
		},
		sex: (state) => {
    
    
			return state.test.sex
		}
	}),
}
//computed内第二种写法
computed: mapState({
    
    //2-2
	count: 'count', // 第一种写法（只能state.xxx才能获取）
	sex: (state) => state.test.sex, // 第二种写法
	count: (state) => state.test.count, // 第二种写法
	from: function (state) {
    
     // 用普通函数this指向vue实例,要注意
		return this.form.delivery + ':' + state.test.from
	},
	// 注意下面的写法看起来和上面相同,事实上箭头函数的this指针并没有指向vue实例,因此不要滥用箭头函数，组件的computed中箭头函数this指向undefined
	from: (state) => this.str + ':' + state.from
	myCmpted: function () {
    
    
		// 这里不需要state,测试一下computed的原有用法
		return '测试' + this.form.one
	}
}),

Getters
创建
单独建立getters.js文件夹

const getters = {
    
    
	count: (state) => {
    
    
		return state.test.count.toString().length
	},
	list: (state) => (id) => {
    
     //这里的用法相当于过滤，调用时传入id，匹配与id相等的项
		return state.test.list.find(item => item.id === id)
	}
}
export default getters

调用

import {
    
    mapGetters} from 'vuex'
computed: {
    
    
	list() {
    
    
		return this.$store.getters.list(2)//1
	},
	...mapGetters({
    
    
		count : 'count'
	}),
	...mapGetters([//同名时可省略
		'count'
	]),
}

Mutation
创建

//一般用大写，下划线命名
const mutations = {
    
    
	ADD_COUNT: (state,count) => {
    
    //1
		state.count += count
	},
	ADD_COUNT: (state,payload) => {
    
    //2 可以向 store.commit 传入额外的参数，即 mutation 的载荷（payload），例如参数为一个对象
		state.count += payload.amount
	}
}
export default {
    
    
	mutations
}

调用

this.$store.commit('ADD_COUNT',100)//1
this.$store.commit('ADD_COUNT',{
    
    amount:100})//2
this.$store.commit({
    
    type:'ADD_COUNT',amount:100})//2
//Mutation 必须是同步函数
//mapMutations
methods: {
    
    //放methods里面
	...mapMutations(['ADD_COUNT']),
	...mapMutations({
    
    
		add: 'ADD_COUNT' // 相当于定义了一个add方法，将 this.add() 映射为 this.$store.commit('ADD_COUNT')
	}),
}
//然后能直接this调用
this.ADD_COUNT({
    
    amount:10000})
this.add({
    
    amount:10000})

Action
创建

//action可以执行异步操作
const actions = {
    
    
	changeCount(context) {
    
    //可直接用context的commit来触发mutation
		context.commit('ADD_COUNT',123)
		setTimeout(() => {
    
    
			context.commit('ADD_COUNT',123)
		}, 1000)
	},
	changeList({
     
      commit,state,rootState }) {
    
    //也可以把需要的几个参数从context中解构出来
		return new Promise((resolve,reject) => {
    
    
			setTimeout(() => {
    
    
				commit('CHE_LIST',[
					{
    
     id: 1, name: 'ohhhh', bol: true},
					{
    
     id: 2, name: 'hoooo', bol: false}
				])
				resolve(state.list)
			}, 2000);
		})
	}
}
export default {
    
    
	actions
}

调用

import {
    
    mapActions} from 'vuex'
this.$store.dispatch('changeCount')//1
methods: {
    
    //2
	...mapActions(['changeCount']),
	...mapActions({
    
    
		add2: 'changeCount',
		changeList: 'changeList'
	}),
}
this.changeCount()
this.add2()

导出注意事项

export default {
    
    //导出注意
	namespaced: true
}
//或者在modules里面
modules: {
    
    
	namespaced: true
	app,
	settings,
	user,
	tagsView,
	test
},
//如果加此设置表示每次调用此模块的内容需要加前缀：'模块/方法'如'test/changList'