vuex

最新推荐文章于 2024-09-22 18:59:52 发布

原创最新推荐文章于 2024-09-22 18:59:52 发布 · 117 阅读

CC 4.0 BY-SA版权

vuex中state、Getters、Mutations、Actions、Modules用法

五大核心

属性	作用
state	存放公共数据
mutations	vuex改变vuex的唯一途径，事件方法
actions	异步操作，异步方法处理数据
getters	计算属性，相当于vue中的computed属性只不过 getters是用于vuex的计算属性
modules	导入其他模块的数据的方法

state：vuex的基本数据，用来存储变量
geeter：从基本数据(state)派生的数据，相当于state的计算属性
mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。
　回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。
action：和mutation的功能大致相同，不同之处在于 ==》1. Action 提交的是 mutation，而不是直接变更状态。 2. Action 可以包含任意异步操作。
modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

state的使用场景及方法

第一种方法：在元素中使用

	<p>{{$store.state.token}}</p>

第二种：在声明周期或者事件方法中使用

	this.$store.state.token

辅助函数：

<p>{{token}}</p>
	<script>
	import { mapState } from 'vuex'
	export default {
		computed: {
	        ...mapState([
	            'token',
	        ]),
	    },
	</script>

mutations 的使用方法及场景

需要先在vuex的methods中传递事件，然后在vuex中接收事件使用，这种触发函数并携带参数的方法叫做载荷。
传递方法给vuex

// 将事件传递到vuex中
	this.$store.commit('changeTel', this.date)

vuex接收事件
mutations接收的事件有一个固定形参state，他代表state方法，第二个参数是传递过来的数据

	// 接收vue传递的事件
	mutations: {
        changeTel(state, val) {
            console.log(val)
        },
    },

辅助函数:

	<script>
	import { mapMutations } from 'vuex'
	export default {
		methods:{
	        ...mapMutations([
	            'changeTel',
	        ]),
	        exitUser() {
            	this.changeTel({tel: 110, age: 18})
        	},
	    }
	</script>

actions 的使用方法及场景

vuex中使用actions的方法

	actions: {
        changeAsync() {
            return new Promise((resolve) => {
                setTimeout(() => {
                    var list = [{
                        name: "商品一",
                        price: 100
                    },
                    {
                        name: "商品二",
                        price: 1200
                    }]
                    resolve(list)
                }, 1000);
            })
        }
    },

vue中使用异步操作的方法

	created() {
        this.$store.dispatch('changeAsync', '123').then(res => {
           this.changeShopList(res)
        })
    },

getters 的使用方法及场景

vuex中使用getters的方法

	getters: {
        // getter方法会接收一个参数state其实就是 store中的state方法
        changeAge(state) {
            state.name++
            return state.name
        }
    },

vue使用方法

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

modules 的使用方法及场景

其他模块相当于一个另一个vuex，可以将庞大的数据，分类封装成单独模块，然后引入到一个模块，提高代码的维护性
封装模块的例子

  	const moduleA = {
  	    state: {
  	        data: 'moduleA',
  	        data1: true
  	    },
  	    getters: {
  	        changeDate1() {
  	            return '你是个麻瓜'
  	        }
  	    },
  	    mutations: {},
  	    actions: {}
  	}
  	export default moduleA

将封装好的模块引入

	modules: {
        moduleA
    },

vue中使用，使用方法和不引入的使用方法一致

	<p>{{changeDate1}}</p>
	<p>{{moduleA.data}}</p>
	<script>
	import { mapState } from 'vuex'
	export default {
		computed: {
	        ...mapState([
	            'moduleA'
	        ]),
	        ...mapGetters([
	            'changeDate1'
	        ])
	    },
	</script>

通过辅助函数mapState、mapActions、mapMutations，把vuex.store中的属性映射到vue实例身上，这样在vue实例中就能访问vuex.store中的属性了，对于操作vuex.store就很方便了。
state辅助函数为mapState，actions辅助函数为mapActions，mutations辅助函数为mapMutations。
（Vuex实例身上有mapState、mapActions、mapMutations属性，属性值都是函数）