学习图：
案例：
进入安装包vuex
yarn add vuex@next --save
新建目录 store
在index.js中属性3个对象
import Vue from 'vue';
import Vuex from 'vuex'
Vue.use(Vuex);
const actions = {
add({commit}, context) {
commit("ADD", context);
},
};
const mutations = {
ADD(state, data) {
state.count += data;
},
};
const getters = {};
const state = {
count: 1,
};
export default new Vuex.Store({
actions,
mutations,
getters,
state,
})
add页面
<!-- liwen - 2022/11/22 - 下午9:35 -->
<template>
<div>
我是首页
<button @click="numberAdd"> 点击我</button>
{{$store.state.count}}
<div>{{count}}</div> //采用mapState 获取数据
</div>
</template>
<script>
//引入仓库
import {mapState} from 'vuex';
export default {
name: "Home",
// import 引入的组件需要注入到对象中才能使用
components: {},
props: {},
data() {
// 这里存放数据
return {
sum:0
}
},
// 计算属性 类似于 data 概念
computed: {
...mapState(['count'])
},
// 监控 data 中的数据变化
watch: {},
// 方法集合
methods: {
numberAdd(){
this.$store.dispatch('add', 100);
}
},
// 生命周期 - 创建完成（可以访问当前this 实例）
created() {
},
// 生命周期 - 挂载完成（可以访问 DOM 元素）
mounted() {
},
beforeCreate() {
},
beforeMount() {
}, // 生命周期 - 挂载之前
beforeUpdate() {
}, // 生命周期 - 更新之前
updated() {
}, // 生命周期 - 更新之后
beforeDestroy() {
}, // 生命周期 - 销毁之前
destroyed() {
}, // 生命周期 - 销毁完成
activated() {
} // 如果页面有 keep-alive 缓存功能,这个函数会触发
}
</script>
<style scoped>
</style>
注册全球主键
main.js
import store from "@/store";
Vue.config.productionTip = false
new Vue({
render: h => h(App),
store
}).$mount('#app')
页面显示数据
