Vuex —— 组件之间数据共享

安装

npm install vuex@next --save

# vuex-demo/src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

createApp(App).use(store).mount('#app')

# vuex-demo/src/store/index.js
import { createStore } from 'vuex'

export default createStore({
	state: {
        count:0
    },
    getters: {
		showNum: state => {
			return '当前最新的数量是：【'+ state.count +'】'
		}
	},
	mutations: {
		add(state) {
			state.count++
		},
        addN(state,step) {
			state.count += step
		}
	},
	actions: {
		addAsync(context) {
			setTimeout(() => {
				context.commit('add')
			}, 1000)
		},
		addNAsync(context,step) {
			setTimeout(() => {
				context.commit('addN',step)
			}, 1000)
		}
	},
	modules: {}
})

State —— 公共数据

Getter —— 包装数据

Mutations —— 改变数据

Action —— 异步操作

官方网址

视频学习

代码实例