精华内容
下载资源
问答
  • Vuex

    2021-02-08 21:15:09
    文章目录01.vuex02.使用vuex03.使用vuex进行数据管理04.使用vuex注意事项 01.vuex vuex是一个全局的共享数据存储区域,就相当于是一个数据的仓库 只有共享的数据,才有权利放到vuex中;组件内部私有的数据,只要放...

    01.vuex

    • vuex是一个全局的共享数据存储区域,就相当于是一个数据的仓库
    • 只有共享的数据,才有权利放到vuex中;组件内部私有的数据,只要放到组件的data中即可

    02.使用vuex

    • 1.下载包 npm i vuex -S
    • 2.引入vuex import Vuex from 'vuex'
    • 3.配置使用vuex Vue.use(Vuex)
    • 4.创建公共数据仓库
    const store=new Vuex.Store({
    	//state类似于之前使用的data,存储的是数据
        state:{
            count:0,
            number:1
        },
        //mutations类似于之前的methods。存储的是方法。一把里面的方法用来操作数据
        mutations:{
        	// 方法名字自定义
            addcount(state,n){
              state.count+=n;
            }
        }
    });
    
    • 5.挂载vuex
    new Vue({
      el: '#app',
      store:store
    })
    
    

    03.使用vuex进行数据管理

    //main.js
    import Vuex from 'vuex'
    Vue.use(Vuex);
    const store=new Vuex.Store({
        state:{
            count:'vuex',
        },
        mutations:{
            addcount(state,n){
              state.count+=n;
            }
        }
    });
    
    
    //details.vue
    <template id="details">
        <div>
        					//获取vuex中的数据
            <h1>这是详情页{{this.$store.state.count}}</h1>
            <button @click='add()'>增加</button>
        </div>
    </template>
    <script>
    export default{			
        mounted(){
            console.log(this.$route.params)
        },
        methods:{
        	//修改数据
            add(){
                this.$store.commit('addcount',100);
            }
        }
    }
    </script>
    

    在这里插入图片描述
    点击修改值:
    在这里插入图片描述

    04.使用vuex注意事项

    • 1.state中的数据,不能直接修改,如果想要修改,必须通过mutations
    • 2.如果组件想要直接从state上获取数据,需要this.$store.state.数据名
    • 3.如果组件想要修改数据,必须使用mutation提供的方法,需要通过this.$store.commit('方法名',参数)
    • 4.如果store中state上的数据,在对外提供的时候,需要做一层包装,那么,推荐使用getters,如果需要使用getters,则用this.$store.getters.***

    2021.02.08 21:24

    展开全文
  • vuex

    2021-03-05 10:35:58
    1.vuex是什么 是实现组件全局状态(数据)管理的一种机制,可以方便实现组件之间数据的共享。 2.使用vuex统一管理状态的好处 (1)能够在vuex中集中管理共享数据,易于开发和后期维护 (2)能够高效实现组件之间的...

    1.vuex是什么

    是实现组件全局状态(数据)管理的一种机制,可以方便实现组件之间数据的共享。

    2.使用vuex统一管理状态的好处

    (1)能够在vuex中集中管理共享数据,易于开发和后期维护
    (2)能够高效实现组件之间的数据共享,提高开发小率
    (3) 存储在vuex数据都是响应式的,能够保存数据与页面的同步

    3. 步骤

    (1)安装vuex包
    
    npm i vuex --save
    

    (2)导入vuex包

    import Vuex from 'vuex'
    Vue.use(Vuex)
    

    (3)创建store对象

    const store = new Vuex.store({
    state:{count:0}
    })
    

    (4)讲store对象挂载到vue实例中

    new Vue({
    	el:'#app',
    	render:h=>h(app),
    	router,
    	store
    	})
    

    4.使用State

    (1)组件访问State中第一种方式

    this.$stort.state.全局数据名称
    

    (2)组件访问State中第二种方式

    1.按需导入
    import {mapState} from 'vuex'
    2.将全局数据,映射为当前组件的计算属性
    computed:{
    ...mapState(['数据对象'])
    }
    

    5.使用mutation

    第一种方法
    用于变更Store的数据,但是不可以直接操作Store里面数据,mutation可以集中监控所有数据变化。

    const store= new Vuex.Store({
    	state:{
    		变量:值
    },
    mutations:{
    	监控变量函数(state){
    		处理数据
    	}
    }
    )
    

    触发mutation变量
    method:{
    处理事件函数(){
    this.$store.commit(‘监控变量函数’)
    }
    第二种方法
    映射方法
    1、导入模块

    import {mapMutations} from 'vuex'
    

    2.映射当前组件函数

    methods:{
    ...mapMutations(['监控变量函数'])
    }
    

    6.Action处理异步任务

    第一种方法
    this.$store.dispatch()
    在这里插入图片描述
    第二种方法

    1.按需导入
    import {mapActions} from 'vuex'
    2.将全局数据,映射为当前组件的计算属性
    computed:{
    ...mapActions(['数据对象'])
    }
    3.在methods里面使用
    数据对象()
    

    7.getters计算属性

    1.方法一:
    this.$store.getters.名字
    2.方法二:

    1.按需导入
    import {mapGetters} from 'vuex'
    2.将全局数据,映射为当前组件的计算属性
    computed:{
    ...mapGetters(['数据对象'])
    }
    

    在这里插入图片描述

    展开全文
  • VUEX

    2020-08-12 10:19:01
    VUEX 直接引入vuex的代码 不是在脚手架使用的情况下 可以下载vuex源码 (https://unpkg.com/vuex) vuex是基于vue的基础上进行开发的 基础使用 在vs里当中使用vuex 首先引入 <script src="./vue.min.js"></...

    -## VUEX
    直接引入vuex的代码 不是在脚手架使用的情况下
    可以下载vuex源码
    (https://unpkg.com/vuex)
    vuex是基于vue的基础上进行开发的
    基础使用

    在vs里当中使用vuex
    首先引入
        <script src="./vue.min.js"></script>
        <script src="./vuex.js"></script> 
       //vuex是基于vue开发的
    

    4步走
    1注册
    2引用
    3定义
    4使用

     //vuex固定语法 1注册
      const store=new Vuex.Store({
                state:{
                }
            })
      //然后在vue当中引入
            var vm = new Vue({
               el:'#app',
               store,//2引用
               data:{},
               methods:{},
                computed:{ //3定义
                   msg(){
                       return this.$store.state.msg
                   }
               }
            }); 
            
          <div id="app">
            {{msg}} //4使用
         </div>
    

    在全局的当中查看

    <body>
        <div id="app">
            {{msg}}
        </div>
        <script src="./vue.min.js"></script>
        <script src="./vuex.js"></script>
        <script>
            //仓库store  state规
            // 创建一个vuex的仓库 在vue当中引入使用
            //这是固定的语法
            const store = new Vuex.Store({
                state: {
                  msg:'msg'
                }
            })
            var vm = new Vue({
                el: '#app',
                store,
                data: {},
                methods: {},
                computed:{
                    msg(){
                        return this.$store.state.msg
                    }  
                }
            });
        </script>
    

    注册一个组件进行查看

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            <result></result>
        </div>
        <script src="./vue.min.js"></script>
        <script src="./vuex.js"></script>
        <script>
            // 1注册
            const store=new Vuex.Store({
                state:{
                    msg:"msg"
                }
            })
            // 注册一个组件 让组件引用vue 把vuex定义在组件中 在组件的标签显示
            const result={
                template:`
                <div>{{msg}}</div>
                `,
                computed:{//3定义
                    msg(){
                        return this.$store.state.msg
                    }
                }
            }
            var vm = new Vue({
               el:'#app',
               store,//引用
               data:{},
               methods:{},
              components:{
                result
               }
            });
        </script>
    </body>
    </html>
    

    vuex的绑定事件是如何控制与操作的参数的1

    state 自带的一个属性 里面写值
    mutations 为控制该属性的值
    computed计算属性 在计算属性返回某个状态
    通过mutations绑定 通过commit接收

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            {{msg}}
            <button @click="clickbtn">点击</button>
        </div>
        <script src="./vue.min.js"></script>
        <script src="./vuex.js"></script>
        <script>
            const store=new Vuex.Store({
                state:{
                    msg:"hello"
                },
                // mutations为控制该变化的值
                // 相当于vue的事件
                mutations:{
                    change(state){
                        state.msg="22222"
                    }
                }
            })
            var vm = new Vue({
               el:'#app',
               store,
               data:{},
               methods:{
                clickbtn(){
                    this.$store.commit('change')
                } 
               },
               computed:{
                msg(){
                    return this.$store.state.msg
                }
               }
            });
        </script>
    </body>
    
    </html>
    

    mutations包含有载荷

    vuex的绑定事件是如何控制与操作的参数的2 这个不太对

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            {{msg}}
            <button @click="btnclick('点击1')">点击</button>
            <button @click="btnclick('点击12')">点击</button>
            <button @click="btnclick('点击123')">点击</button>
            <button @click="btnclick('点击1234')">点击</button>
            <button @click="btnclick('点击12345')">点击</button>
        </div>
        <script src="./vue.min.js"></script>
        <script src="./vuex.js"></script>
        <script src="./axios.min.js"></script>
        <script>
            const store=new Vuex.Store({
            state:{
                msg:'msg'
            },
            mutations:{
                // mutation是VUEX改变的唯一属性 有2个参数 state,playload
             chang(state,{msg}){
                this.state.msg=msg
             }
            },
            actions:{
             
            }
            })
            var vm = new Vue({
               el:'#app',
               store,
               computed:{
               msg(){
                //利用计算属性进行把得到的值暴露全局当中 进行使用
                   return this.$store.state.msg
               }
               },
               data:{},
               methods:{
                btnclick(name){
                this.$store.commit('chang',{
                  msg:name
                })
                }
               }
            });
        </script>
    </body>
    
    </html>
    
             state:{}, 这是vuex写属性的
            mutations:{}, 这是vuex当中独有更改样式的 里面的自定义参数与vue当中的接收commit里面的参数保     证一致
            actions:{}  这是vuex当中请求数据的 这里面不一定全是请求数据的 但请求数据一定是在这里面的
    

    在vue脚手架里面安装vuex

    窗口命令是
    cnpm i vuex --save

    vuex导出与导入与vue不一样
    这是导出

    // 这里面写vuex
    // 要先引入vuex vuex是建立在vue的基础上
    import Vue from 'vue'
    import Vuex from 'vuex'
    Vue.use(Vuex)
    
    const store=new Vuex.Store({
        state:{
            msg:'hello'
        }
    })
    export default store
    // 把vuex进行导出 在mian.js里进行引入
    

    这是导入

    <template>
      <div id="app">
        {{msg}}
      </div>
    </template>
    <script>
    import store from '@/store/index'
    export default {
        computed:{
           msg() {
             return this.$store.state.msg
           }
        }
    }
    </script>
    <style lang="scss" scoped>
     
    </style>
    

    也可以用mapState铺助函数 展开运算符
    直接引入vuex的铺助函数mapState进行展开把值传入进去
    在这里插入图片描述

    <template>
      <div id="app">
        {{msg}}
        {{msg1}}
        <button >点击</button>
        <!-- @click="btnclick" -->
      </div>
    </template>
    <script>
    // import store from '@/store/index'
    import { mapState } from "vuex";
    export default {
      computed: {
        // msg() {
        //   return this.$store.state.msg;
        // },
        // msg1() {
        //   return this.$store.state.msg1;
        // }
        ...mapState(['msg','msg1'])
      }
    };
    </script>
    <style lang="scss" scoped>
    </style>
    
    

    添加点击事件

    当添加点击事件vuex用mutations来绑定

    // 这里面写vuex
    // 要先引入vuex vuex是建立在vue的基础上
    import Vue from 'vue'
    import Vuex from 'vuex'
    Vue.use(Vuex)
    
    const store=new Vuex.Store({
        state:{
            msg:'hello',
            msg1:'word'
        },
        mutations:{
            chang(state){
               state.msg="tttttt"
            }
        }
    })
    export default store
    // 把vuex进行导出 在mian.js里进行引入
    

    也可以引用铺助函数 mapMutations

    <template>
      <div id="app">
        {{msg}}
        {{msg1}}
        <!-- <button @click="btnclick">点击</button> -->
          <button @click="chang">点击</button>//使用铺助函数里面的自定义参数要与这里的保持一致,,
      </div>
    </template>
    <script>
    // import store from '@/store/index'
    import { mapState,mapMutations} from "vuex";
    export default {
      computed: {
        // msg() {
        //   return this.$store.state.msg;
        // },
        // msg1() {
        //   return this.$store.state.msg1;
        // }
        ...mapState(['msg','msg1'])
      },
     methods:{
    // btnclick(){
    //   this.$store.commit('chang')
    ...mapMutations(['chang'])//这是使用铺助函数来进行控制该数值的变化 要与点击的自定义参数保持一直
     }
    };
    </script>
    <style lang="scss" scoped>
    </style>
    

    vuex简单的数据引入

    这是vue简单引入的使用

       const store=new Vuex.Store({
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    
    <body>
        <div id="app">
            <ul>
                <li v-for="item in topic">{{item.title}}</li>
            </ul>
        </div>
        <script src="./vue.min.js"></script>
        <script src="./vuex.js"></script>
        <script src="./axios.min.js"></script>
        <script>
            const store=new Vuex.Store({
                state:{},
                mutations:{},
            })
           
            var vm = new Vue({
               el:'#app',
               store,
               data:{
                   topic:[]
               },
               created(){
                   axios.get('https://cnodejs.org/api/v1/topics').then(res=>{
                   console.log(res)//这里面打印的res可以看到该数据的结构
                      this.topic=res.data.data
                   })
               },
               methods:{}
            });
        </script>
    </body>
    
    </html>
    

    使用vuex进行数据的请求与渲染操作

    数据是从后台请求出来的

    mutations需要commit才可以触发
    actions需要dispatch才可以触发
       this.$store.commit  
       this.$store.dispacth  这样来使用
    

    ** 在vuex请求数据当中actions里面写axios.get()请求的
    里面的自定义参数进行发送的数据要在vue当中
    created(){}里面通过dispatch()进行调用**

    mutations里更改state里面的事件
    要用commit()进行接收 固定搭配

    这是一般的结构

     <script>
            const store=new Vuex.Store({
                state:{
                    // 这里是写该数据
                    topic:[]
                },
                mutation:{
                    // 这里是唯一更改该数据的
                },
                actions:{
                    // 这里是axios请求数据的 
                    // 这里不全是请求数据 但是请求数据都是在这里面写
                }
            })
            var vm = new Vue({
               el:'#app',
               store,
               data:{},
               computed:{
                //这里放vuex的属性 一般vuex放的属性是在计算属性里填写的 
                // 这里拿的是state里面定义的属性 
                topic(){
                    return this.$store.state.topic
                }  
               },
               methods:{}
            });
        </script>
    

    这是真正的内容
    这里的数子对应数字

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            <ul>
                <li v-for="item in  topic">{{item.title}}</li>
            </ul>
        </div>
        <script src="./vue.min.js"></script>
        <script src="./vuex.js"></script>
        <script src="./axios.min.js"></script>
        <script>
            const store=new Vuex.Store({
                state:{
                    // 1 这里是写该数据
                    topic:[]
                },
                mutations:{
                    //2 这个是更改state里的数据 要通过commit进行数据接收
                  settopic(state,{topic}){
                    state.topic=topic
                  }
                },
                actions:{
                    // 这里是放请求数据的要在vue生命周期created当中进行搭配引用
                  gettopics(content){
                      //3
                      axios.get('https://cnodejs.org/api/v1/topics').then(res=>{
                        content.commit('settopic',{topic: res.data.data}) //2
                      })
                  }
                  
                }
            })
            var vm = new Vue({
               el:'#app',
               store,
               data:{},
               computed:{
                //这里放vuex的属性 一般vuex放的属性是在计算属性里填写的 
                // 这里拿的是state里面定义的属性 
                topic(){
                    // 1
                    return this.$store.state.topic
                }  
               },
               created(){
                // 3 这里是调用axios里面的值用dispath来进行调用
                this.$store.dispatch("gettopics")    
               },
               methods:{}
            });
        </script>
    </body>
    </html>
    

    axios可以进行异步操作
    一般操作请求的列子

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    
    <body>
        <div id="app">
            {{$store.state.count}}
            <button @click="btnclick1">点击1</button>
            <button @click="btnclick">点击</button>
        </div>
        <script src="./vue.min.js"></script>
        <script src="./vuex.js"></script>
        <script src="./axios.min.js"></script>
        <script>
           const store=new Vuex.Store({
            state:{
                count:0
            },
            mutations:{
                setcount(state){
                    state.count++
                }
            },
            // actios有异步请求
            actions:{
                getmit(content){
                 setTimeout(()=>{
                     console.log(1111)
                    //mutation对应commit
                    // actions对应dispatch
                    content.commit('setcount')  
                 },2000)
                }
            }
            })
            var vm = new Vue({
               el:'#app',
               store,
               data:{},
               methods:{
                btnclick(){
                    this.$store.dispatch('getmit')
                },
                btnclick1(){
                   this.$store.commit('setcount')
               }
               },
              
            });
        </script>
    </body>
    </html>
    
    让请求的数据只显示20个 2种方法

    还未理解理解

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            <ul>
                <li v-for="item in  topic">{{item.title}}</li>
            </ul>
        </div>
        <script src="./vue.min.js"></script>
        <script src="./vuex.js"></script>
        <script src="./axios.min.js"></script>
        <script>
            const store=new Vuex.Store({
                state:{
                    // 1 这里是写该数据
                    topic:[]
                },
                mutations:{
                    //2 这个是更改state里的数据 要通过commit进行数据接收
                  settopic(state,{topic}){
                    state.topic=topic
                  }
                },
                actions:{
                    // 这里是放请求数据的要在vue生命周期created当中进行搭配引用
                  gettopics({commit},{limit}){
                      //params进行传参
                      axios.get('https://cnodejs.org/api/v1/topics',{params:{
                          limit:limit
                      }}).then(res=>{
                        commit('settopic',{topic: res.data.data}) 
                      })
                  }
                   // actions:{ 这是另一种方式 
                  //   gettopics({commit},playload){
                  //       //params进行传参
                //       axios.get('https://cnodejs.org/api/v1/topics',{params:{
                //       limit:playload.limit
                //       }}).then(res=>{
                //         commit('settopic',{topic: res.data.data}) //2
                //       })
                //   }
                  
                // }
                }
            })
            var vm = new Vue({
               el:'#app',
               store,
               data:{},
               computed:{
                //这里放vuex的属性 一般vuex放的属性是在计算属性里填写的 
                // 这里拿的是state里面定义的属性 
                topic(){
                    // 1
                    return this.$store.state.topic
                }  
               },
               created(){
                // 3 这里是调用axios里面的值 用dispath来进行调用
                this.$store.dispatch("gettopics",{
                    limit:20//这里给的
                })    
               },
               methods:{}
            });
        </script>
    </body>
    </html>
    

    使用module模板来定义

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    
    <body>
        <div id="app">
            {{msg}}
            {{msg1}}
        </div>
        <script src="./vue.min.js"></script>
        <script src="./vuex.js"></script>
        <script src="./axios.min.js"></script>
        <script>
            const {mapState}=Vuex
           const moduleA={
               //使用module模板来定义 里面可以包括各类store的属性
               //模板的别名/命名空间 
             namespaced:'true',
             state:{
                 msg1:'moduleA'//定义的变量
             },
             mutations:{},
             actions:{}
            }
            const store=new Vuex.Store({
                state:{
                    msg:"msg"
                },
                mutations:{},
                actions:{},
                modules:{
                    //模板定义
                    moduleA
                }
            })
            var vm = new Vue({
               el:'#app',
               store,
               data:{},
               computed:{
                msg(){
                    return this.$store.state.msg
                },
                ...mapState('moduleA',['msg1']),//这个用扩展运算符写
                ...mapState({
                    rootmsg:'msg1'//当里面的变量与store里面的变量重复时 使用 自定义的名字
                })
                // msg1(){
                //     //读取上面定义的
                //     return this.$store.state.moduleA.msg1
                // }
               },
               methods:{}
            });
        </script>
    </body>
    
    </html>
    
    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 45,525
精华内容 18,210
热门标签
关键字:

vuex

vue 订阅