##菜鸟日记— 关于Vuex—(实现一个备忘录添加删除)
一.了解Vuex
-
什么是Vuex?
vuex是vue的一个插件;
给vue进行共享数据的状态管理状态机;
适合大型项目开发。 -
基础概念
State:管理数据状态-数据初始化,类似于data。由于普通组件之间无法实现数据共享,一个组件无法访问另一个组件中的数据,因此state相当于是将每个vue实例中的公共变量抽取出来进行统一管理。
Getters:获取器-类似计算属性,获取state中的数据。
Mutations:突变-类似于methods,只能声明同步函数,只能通过突变修改state。
Actions:类似于methods,书写异步函数。 -
Vuex工作流程
(如下图)
①用户点击HTML元素触发组件中的Methods
②发送异步请求
③异步请求结束拿到返回结果,触发突变
④突变改变state中的值
⑤将state中的值传给Getters
⑥getters将值传给Computed
⑦Computed最终将值传回给Html
二.使用Vuex
安装Vuex,这里可以直接使用cdn导入
<script src="https://cdn.bootcdn.net/ajax/libs/vuex/3.2.0/vuex.min.js"></script>
实例化一个store实例对象
<script>
var store = new Vuex.Store({
state: {},
getters:{},
mutations: {},
actions: {}
});
</script>
将store实例对象注入到Vue实例中
<script>
new Vue({
el:'#app',
store:store,
computed: {},
methods:{}
}
})
</script>
三.使用Vuex实现一个备忘录的添加和删除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vuex.min.js"></script>
<script src="../js/vue.js"></script>
<script src="../js/jquery-3.5.1.js"></script>
<script>
window.onload = function () {
// 引入辅助函数
var mapState = Vuex.mapState;
var mapGetters = Vuex.mapGetters;
var mapMutations = Vuex.mapMutations;
var mapActions = Vuex.mapActions;
var store = new Vuex.Store({
state: {
//数据初始化
list: [],
},
getters: {
//获取器-计算属性
list: state => state.list
},
mutations: {
//突变修改state--methods同步函数
addMemo(state, memo) {
//声明数据格式
//追加到list中
state.list.push(memo);
},
deleteMemoHandler(state, id) {
state.list = state.list.filter((item) => {
return item.id != id
})
}
},
actions: {
//动作,methods异步函数
getData(context, memo) {
$.ajax({
url: 'http://47.106.244.1:8099/manager/category/findAllCategory',
success: function (data) {
// console.log(data);
// 触发突变修改state
context.commit("addMemo", memo)
}
})
}
}
});
new Vue({
el: "#app",
store,//注入store
data: {
msg: '',
index: 1,
},
computed: {
// ...mapState(['list'])
...mapGetters(['list'])
},
methods: {
...mapMutations(['deleteMemoHandler']),
...mapActions(['getData']),
addMemo() {
//声明数据格式
var memo = {
id: this.index,
msg: this.msg,
time: new Date().toLocaleString()
}
//追加到list中
// this.list.push(memo);
// 触发突变,传递memo参数
// this.$store.commit("addMemo", memo)
// 触发动作,传递memo-异步函数
// this.$store.dispatch("getData", memo)
this.getData(memo);
this.index++;
this.msg = ''
},
deleteMemo(id) {
// this.$store.commit("deleteMemo", id)
this.deleteMemoHandler(id);
}
}
})
}
</script>
</head>
<body>
<div id="app">
<h2>备忘录</h2>
<form action="" @submit.prevent='addMemo'>
<input type="text" v-model='msg'>
<input type="submit" value="保存">
</form>
<ul>
<li v-for='item in list'>
<span>{{item.id}}</span>
<span>{{item.msg}}</span>
<span>{{item.time}}</span>
<a href="#" @click.prevent='deleteMemo(item.id)'>删除</a>
</li>
</ul>
</div>
</body>
</html>