Vuex基本使用-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vuex基本使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、什么是vuex

专门在 Vue 中实现集中式状态（数据）管理的一个Vue 插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。

二、什么时候使用 Vuex

多个组件依赖于同一状态
来自不同组件的行为需要变更同一状态

三、Vuex 工作原理图

Vuex基本使用,Vue,vue.js,javascript,前端

四、vuex 核心概念和 API

4.1 state

vuex 管理的状态对象

它应该是唯一的

//准备state——用于存储数据
const state = {
	sum:0 //当前的和
}

4.2 actions

值为一个对象，包含多个响应用户动作的回调函数
通过 commit( )来触发 mutation 中函数的调用, 间接更新state
如何触发 actions 中的回调？
在组件中使用: $store.dispatch('对应的 action 回调名') 触发

可以包含异步代码（定时器, ajax 等等）

//准备actions——用于响应组件中的动作
const actions = {
	jia(context,value){
		console.log('actions中的jia被调用了')
		context.commit('JIA',value)
	}
}

4.3 mutations

值是一个对象，包含多个直接更新 state 的方法
谁能调用 mutations 中的方法？如何调用？
在 action 中使用：commit('对应的 mutations 方法名') 触发

mutations 中方法的特点：不能写异步代码、只能单纯的操作state

//准备mutations——用于操作数据（state）
const mutations = {
	JIA(state,value){
		console.log('mutations中的JIA被调用了')
		state.sum += value
	}
}

4.4 getters

值为一个对象，包含多个用于返回数据的函数
如何使用？—— $store.getters.xxx

示例代码：

//准备getters——用于将state中的数据进行加工
const getters = {
	bigSum(state){
		return state.sum*10
	}
}

五、代码生成器

5.1 mapGetters

    computed:{
        //自己实现
        // bigSum(){
        //     return this.$store.getters.bigSum
        // },
        //使用Vuex的mapGetters生成和getters相关的代码,从getters中读取数据
        ...mapGetters({bigSum:'bigSum'})
    },

5.2 mapState

    computed:{
        //自己实现代码
        // sum(){
        //     return this.$store.state.sum  
        // },
        // school(){
        //     return this.$store.state.school
        // },
        // subject(){
        //     return this.$store.state.subject
        // },
        //使用Vuex的mapState生成和state相关的代码,...代表把mapState中的方法或者属性放到computed中
        //对象写法
        // ...mapState({sum:'sum',school:'school',subject:'subject'}),
        //数组写法
        ...mapState(['sum','school','subject']),
    }

5.3 mapActions

    methods: {
    	//自己实现
        // incrementOdd(){
        //     this.$store.dispatch('jiaOdd',this.n)

        // },
        // incrementWait(){
        //     this.$store.dispatch('jiaWait',this.n) 
        // }
        //借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)
        ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'}),
        //借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(数组写法)
        // ...mapActions(['jiaOdd','jiaWait'])
    },

5.4 mapMutations

methods: {
		//自己实现
        // increment(){
        //     //如果没有什么业务逻辑可以直接commit
        //     this.$store.commit('JIA',this.n)
        // },
        // decrement(){
        //     //如果没有什么业务逻辑可以直接commit
        //     this.$store.commit('JIAN',this.n)
        // },
        //借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)
        ...mapMutations({increment:'JIA',decrement:'JIAN'}),
        //借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(数组写法)
        // ...mapMutations(['JIA','JIAN']),
     
    }

六、vuex模块化编码

在实际开发中我们的业务会分为很多种，如果把不同业务的功能都写在一个文件里的话就会很不好维护，所以我们可以把每个业务单独形成一个模块。
例如：现在有一个count和person模块

count.js

//求和相关配置
export default {
    //开启命名空间，默认为false
    namespaced:true,
    actions:{
        jiaOdd(context,value){
            if (context.state.sum%2) {
                context.commit('JIA',value)
            }
        },
        jiaWait(context,value){
            setTimeout(()=>{
                context.commit('JIA',value)
            },500)    
        }
    },
    mutations:{
        JIA(state,value){
            state.sum+=value
        },
        JIAN(state,value){
            state.sum-=value
        },
    },
    state:{
        sum:0,//当前的和
        school:'b站大学',
        subject:"vue",
    },
    getters:{
        bigSum(state){
            return state.sum*10
        }
    }
}

person.js

import axios from "axios"
import { nanoid } from "nanoid"
//人员管理相关配置
export default {
    //开启命名空间，默认为false
    namespaced:true,
    actions:{
        addPersonWang(context,value){
            if(value.name.indexOf('王')===0){
                context.commit('ADD_PERSON',value)
            }else{
                alert('添加的人必须姓王！')
            }
        },
        //从服务器获取数据
        addPersonServer(context){
            axios.get('https://api.uixsj.cn/hitokoto/get?type=social').then(
                response=>{
                    context.commit('ADD_PERSON',{id:nanoid(),name:response.data})
                },
                error=>{
                    console.log(error.message)
                }
            )
        }
    },
    mutations:{
        ADD_PERSON(state,value){
            if(value.name === ''){
                alert("不能为空！")
            }else{
                state.personList.unshift(value)
            }
        }
    },
    state:{
        personList:[
            {id:'001',name:'张三'}
        ]
    },
    getters:{
        firstPersonName(state){
            return state.personList[0].name
        }

合并业务:将count和person配置到Vuex.Store
index.js

//该文件用于常见Vuex中最为核心的store

//引入Vuex
import Vuex from 'vuex'
//引入Vue
import Vue from 'vue'

import countOptions from './count'
import personOptions from './person'
Vue.use(Vuex)

//创建store，并对外暴露store
export default new Vuex.Store({
    modules:{
        countAbout:countOptions,
        personAbout:personOptions
    }
})

main.js

import Vue from "vue"
import App from "./App.vue"
//引入store
import store from './store/index'
//引入插件
import VueResource from "vue-resource";
Vue.config.productionTip=false;
//使用插件
Vue.use(VueResource)

const vm = new Vue({
    el:"#app",
    render:h=>h(App),
    store,
    beforeCreate(){
        Vue.prototype.$bus=this
    }
})

七、求和案例

目录结构：
Vuex基本使用,Vue,vue.js,javascript,前端

Count.vue

<template>
	<div>
		<h1>当前求和为：{{$store.state.sum}}</h1>
		<select v-model.number="n">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
		</select>
		<button @click="increment">+</button>
		<button @click="decrement">-</button>
		<button @click="incrementOdd">当前求和为奇数再加</button>
		<button @click="incrementWait">等一等再加</button>
	</div>
</template>

<script>
	export default {
		name:'Count',
		data() {
			return {
				n:1, //用户选择的数字
			}
		},
		methods: {
			increment(){
				this.$store.commit('JIA',this.n)
			},
			decrement(){
				this.$store.commit('JIAN',this.n)
			},
			incrementOdd(){
				this.$store.dispatch('jiaOdd',this.n)
			},
			incrementWait(){
				this.$store.dispatch('jiaWait',this.n)
			},
		},
		mounted() {
			console.log('Count',this)
		},
	}
</script>

<style lang="css">
	button{
		margin-left: 5px;
	}
</style>

index.js

//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

//准备actions——用于响应组件中的动作
const actions = {
	/* jia(context,value){
		console.log('actions中的jia被调用了')
		context.commit('JIA',value)
	},
	jian(context,value){
		console.log('actions中的jian被调用了')
		context.commit('JIAN',value)
	}, */
	jiaOdd(context,value){
		console.log('actions中的jiaOdd被调用了')
		if(context.state.sum % 2){
			context.commit('JIA',value)
		}
	},
	jiaWait(context,value){
		console.log('actions中的jiaWait被调用了')
		setTimeout(()=>{
			context.commit('JIA',value)
		},500)
	}
}
//准备mutations——用于操作数据（state）
const mutations = {
	JIA(state,value){
		console.log('mutations中的JIA被调用了')
		state.sum += value
	},
	JIAN(state,value){
		console.log('mutations中的JIAN被调用了')
		state.sum -= value
	}
}
//准备state——用于存储数据
const state = {
	sum:0 //当前的和
}

//创建并暴露store
export default new Vuex.Store({
	actions,
	mutations,
	state,
})

App.vue

<template>
	<div>
		<Count/>
	</div>
</template>

<script>
	import Count from './components/Count'
	export default {
		name:'App',
		components:{Count},
		mounted() {
			// console.log('App',this)
		},
	}
</script>

main.js文章来源地址https://www.toymoban.com/news/detail-594197.html

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入插件
import vueResource from 'vue-resource'
//引入store
import store from './store'

//关闭Vue的生产提示
Vue.config.productionTip = false
//使用插件
Vue.use(vueResource)

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	store,
	beforeCreate() {
		Vue.prototype.$bus = this
	}
})