前端|Vuex —— 组件之间数据共享前端|vue.js

【前端|Vuex —— 组件之间数据共享】
Vuex

安装
State —— 公共数据
Getter —— 包装数据
Mutations —— 改变数据
Action —— 异步操作
官方网址
视频学习
代码实例

安装

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 —— 异步操作

官方网址视频学习代码实例