##菜鸟日记— 关于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>