vuex使用

概述

1、概念：专门在 Vue 中实现集中式状态（数据）管理的一个 Vue 插件，对 vue 应

用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。

2.、Github 地址: GitHub - vuejs/vuex: 🗃️ Centralized State Management for Vue.js.

3、vuex和全局事件总线区别

4、什么时候使用vuex

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

原理

说明

1、上面的actions、state、mutations三个都是对象

2、actions、state、mutations三个都是通过一个store管理

vuex环境搭建

1、安装

npm install vuex --save

2、创建store

创建store文件夹，store下创建index.js文件

import Vue from 'vue'
import Vuex from 'vuex'

/*使用store之前得引用vuex*/
Vue.use(Vuex)


export default new Vuex.Store({
    state: {
    },
    mutations: {
    },
    actions: {
    },
})

3、main.js中创建vm时配置store配置项

import store from './store'
new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')

vuex使用

<script src="../store/index.js"></script>
<template>
	<div>
		<!--显示的是vuex中state中定义的共享数据-->
		<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: {
			/*通过dispatch api操作vuex中的actions*/
			incrementOdd(){
        //第一个参数是actions中的方法名，第二个是共享值
				this.$store.dispatch('jiaOdd',this.n)
			},
			incrementWait(){
				this.$store.dispatch('jiaWait',this.n)
			},
			/*直接通过commit操作vuex中的mutations*/
			increment(){
				this.$store.commit('JIA',this.n)
			},
			decrement(){
				this.$store.commit('JIAN',this.n)
			},
		},
		mounted() {
			console.log('Count',this)
		},
	}
</script>

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

store中的index.js

import Vue from 'vue'
import Vuex from '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 = {
	//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,
})









==================简写======================
  import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    actions: {

    }
    ,
    mutations: {
        SET_CONTENT(state, value){
            state.content = value
        }
    },
    state: {
        content:{}
    },
})