开发面试题 机器学习 less 劝酒文化 pdf service base64 vue原理 jquery绑定事件的方法 mac安装hadoop matlab停止运行命令 python程序界面 java解析json数组 mysql汉化包 matlab不等于怎么表示 python3文件操作 python高级 python指数函数 python中文文档 python正则表达式语法 java斐波那契数列 java编程课程 java学习教程 java中的继承 java中泛型 java基本数据结构 java泛型的使用 linuxcat命令 离散数学及其应用 atq 不寻常的指南针 idea重命名快捷键 idataparameter 视频加字幕软件 数独软件 spss20安装教程 俄罗斯方块代码 奥法隐藏外观 魔兽天龙八部 android下载文件
当前位置: 首页 > 学习教程  > 编程语言

关于Vuex

2020/10/8 20:31:23 文章标签:

关于Vuex—(实现一个备忘录添加删除) 一.了解Vuex 什么是Vuex? vuex是vue的一个插件; 给vue进行共享数据的状态管理状态机; 适合大型项目开发。 基础概念 State:管理数据状态-数据初始化,类似于data。由于普通组件之…

关于Vuex—(实现一个备忘录添加删除)

一.了解Vuex

  1. 什么是Vuex?
    vuex是vue的一个插件;
    给vue进行共享数据的状态管理状态机;
    适合大型项目开发。

  2. 基础概念
    State:管理数据状态-数据初始化,类似于data。由于普通组件之间无法实现数据共享,一个组件无法访问另一个组件中的数据,因此state相当于是将每个vue实例中的公共变量抽取出来进行统一管理。
    Getters:获取器-类似计算属性,获取state中的数据。
    Mutations:突变-类似于methods,只能声明同步函数,只能通过突变修改state。
    Actions:类似于methods,书写异步函数。

  3. 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>

本文链接: http://www.dtmao.cc/news_show_250327.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?