关于Vuex

##菜鸟日记— 关于Vuex—(实现一个备忘录添加删除)
一.了解Vuex

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

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

  3. Vuex工作流程
    (如下图)
    关于Vuex_第1张图片①用户点击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实现一个备忘录的添加和删除
关于Vuex_第2张图片


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <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>

你可能感兴趣的:(Vue,vue,javascript,css,html,html5)