<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<button type="button" id="submit" @click="subBtn()"></button>
</div>
<!-- Vuex
渐进式框架:主张最少,没有强主张,可以将vue中的某些东西进行改动,实现自己所想要达到的效果,而不像react和angular框架,,对应使用者有较大的主张要求。
Vuex是一个专为vue.js应用程序开发的状态管理模式。
由于store中的状态是响应式的,在组件中调用 stroe 中的状态简单到仅需要在计算属性中返回即可。触发变化也仅仅是在组件的methods中提交mutation。
Vuex应用的核心就是一个store(仓库)。
Vuex的主要属性设置:
state:
getter:
mutation:
action:
module:
-->
<script type="text/javascript">
new Vue({
// state
data() {
return {
count: 0
}
},
// view
methods: {
increment() {
this.count++;
}
},
})
</script>
<!-- Vuex的使用 -->
<script type="text/javascript">
//1.安装Vuex
//2.引入
import Vue from "vue";
import Vuex from "vuex";
// 引入数据辅助函数mapState
import { mapState } from "vuex";
// 引入mapGetters
import { mapGetters } from "vuex";
// 引入mapMutation
import { mapMutation } from "vuex";
// 引入方法辅助函数mapAction
import { mapAction } from "vuex"
vue中Vuex详解
最新推荐文章于 2024-07-11 23:14:56 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)