Vuex笔记

Vuex笔记

Vuex是一个专为Vue.js应用程序开发的状态管理模式。

调试工具：vue devtools

1. state

在state中定义数据，在组件中直接使用；

目录：store/index.js

export default new Vuex.Store({
    //state相当于组件中的data，专门用来存放全局的数据
    state: {
        num: 0
    },
    getters: {},
    mutations: {},
    actions: {},
    modules: {}
})

目录：Home.vue

<template>
	<div class="home">
        <h2>
            Home页面的数字：{{$store.state.num}}
        </h2>
    </div>
</template>

<script>
export default {
    
}
</script>

或者写为：

<template>
	<div>
        <h2 class="about">
            About页面的数字：{{num}}
        </h2>
    </div>
</template>

<script>
export default {
    computed: {
        num() {
			return this.$store.state.num
        }
    }
}
</script>

2. getters

将组件中统一使用的computed都放到getters里面操作

目录：store/index.js

export default new Vuex.Store({
    //state相当于组件中的data，专门用来存放全局的数据
    state: {
        num: 0
    },
    //getters相当于组件中的computed，getters是全局的，computed是组件内部使用的
    getters: {
        getNum(state) {
            return state.num
        }
    },
    mutations: {},
    actions: {},
    modules: {}
})

目录：Home.vue

<template>
	<div class="home">
        <h2>
            Home页面的数字：{{$store.getters.getNum}}
        </h2>
    </div>
</template>

<script>
export default {
    
}
</script>

3. mutations

更改Vuex的store中的状态的唯一方法就是提交mutation。

export default new Vuex.Store({
    //state相当于组件中的data，专门用来存放全局的数据
    state: {
        num: 0
    },
    //getters相当于组件中的computed，getters是全局的，computed是组件内部使用的
    getters: {
        getNum(state) {
            return state.num
        }
    },
    //mutations相当于组件中的methods，但是它不能使用异步方法（定时器、axios）
    //payload是一个形参，如果组件在commit时，有传这个参数过来，就存在，如果没有传过来，就是undefined
    mutations: {
        increase(state,payload){
			state.num += payload ? payload : 1;
        }
    },
    actions: {},
    modules: {}
})

目录：Btn.vue

<template>
	<div>
        <button @click="$store.commit('increase',2)">
            点击加1
        </button>
    </div>
</template>

<script>
export default {
    methods: {
		
    }
}
</script>

4. actions

actions是store中专门用来处理异步的，实际修改状态值的，还是mutations

export default new Vuex.Store({
    //state相当于组件中的data，专门用来存放全局的数据
    state: {
        num: 0
    },
    //getters相当于组件中的computed，getters是全局的，computed是组件内部使用的
    getters: {
        getNum(state) {
            return state.num
        }
    },
    //mutations相当于组件中的methods，但是它不能使用异步方法（定时器、axios）
    //payload是一个形参，如果组件在commit时，有传这个参数过来，就存在，如果没有传过来，就是undefined
    mutations: {
        increase(state,payload){
			state.num += payload ? payload : 1;
        }
    },
    //actions专门用来处理异步，实际修改状态值的，依然是mutations
    actions: {
        //点击了“减1”按钮后，就执行减法
        decreaseAsync(context){
            context.commit('decrease')
        }
    },
    modules: {}
})

目录：Btn.vue

<template>
	<div>
        <button @click="$store.commit('increase',2)">
            点击加1
        </button>
        <button @click="$store.dispatch('decreaseAsync')">
            点击减1
        </button>
    </div>
</template>

<script>
export default {
    methods: {
		
    }
}
</script>

5. 辅助函数

mapState和mapGetters在组件中都是写在computed里面

<template>
	<div>
       	<h2>
            Home页面的数字：{{num}}
        </h2>
        <h2>
            About页面的数字： {{getNum}}
        </h2>
    </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'

export default {
    computed: {
		...mapState(['num'])
        ...mapGetters(['getNum'])
    }
}
</script>

mapMutations和mapActions在组件中都是写在methods里面

<template>
	<div>
       	<button @click="increse(2)">
            点击加1
        </button>
        <button @click="decreaseAsync()">
            点击减1
        </button>
    </div>
</template>

<script>
import { mapMutations, mapActions } from 'vuex'

export default {
    computed: {
		...mapMutations(['increase'])
        ...mapActions(['decreaseAsync'])
    }
}
</script>

6. 拆分写法

store中的所有属性，都可以拆分成独立的js文件来书写。

7. modules

我们的store可以认为是一个主模块，它下面可以分解为很多子模块，子模块都可以单独拎出来写，写完再导入到主模块中。

下面以users子模块举例：

users模块也可以拥有state、getters、mutations、actions

所有的方法和属性，该怎么写就怎么写。但users的index.js文件中，需要写入namespaced: true命名空间。

然后在store的index.js中引入到modules中。

在组件中获取值的方法：

$store.state.users.nickname

在组件中触发mutations的方法：

methods: {
    ...mapMutaions({
        'changeNickname': 'users/changeNickname'
    })
}

8. MUTATIONS_TYPE

将所有mutations中的方法归纳起来。

目录：mutations_type.js

export const MUTATIONS_TYPE = {
    INCREASE: 'increse',
    DECREASE: 'decrease'
}

export default {
	//让numL累加
    [MUTATIONS_TYPE.INCREASE](state,payload){
        state.num += payload ? payload : 1;
    }
    [MUTATIONS_TYPE.DECREASE](state){
        state.num--;
    }
}

目录：store/index.js

import mutations from './mutation_type'

export default new Vuex.store({
 	state,
	getters,
	mutations,
	actions,
	modules: {
		users
}
})

组件中：

<template>
	<div class="about">
        <h2>
            About页面的数字：{{getNum}}
        </h2>
        <button @click="increase()">
            About是按钮，点击加1
        </button>
    </div>
</template>

<script>
import { mapGetters,mapMutations } from 'vuex'
import { MUTATIONS_TYPE } from '@/store/mutations_type.js'
export default {
    computed: {
		...mapGetters(['getNum'])
    },
    methods: {
        ...mapMutations([MUTATIONS_TYPE.INCRESE])
    }
}
</script>