精华内容
参与话题
问答
  • Vuex

    2020-12-30 22:53:36
    Vuex 流程图 安装及引入Vuex npm install vuex --save yarn add vuex 引入vuex并实例化 impornt Vuex from 'vuex' //往vue里面注册vuex Vue.use(Vuex) //给vuex实例化对象store const store = new Vuex.store( ...

    Vuex

    流程图
    在这里插入图片描述
    安装及引入Vuex

    npm install vuex --save
    
    yarn add vuex
    

    引入vuex并实例化

    impornt Vuex from 'vuex'
    
    //往vue里面注册vuex
    Vue.use(Vuex)
    //给vuex实例化对象store
    const store = new Vuex.store(
     {
         
        state: {
        count: 0
      },
     }
    )
    
    new Vue({
        //在根实例配置 store 选项指向 store 实例对象
        router,
        store,
        render: function(h) { return h(App) }
    }).$mount('#app')
    

    state共享数据存放模块

    定义:state是拿来存放项目共享数据的存储池
    一般用方法
    在这里插入图片描述
    引用state中大部分数据用法
    在这里插入图片描述

    mutations共享事件处理模块

    在Store中实例对象mutations
    在这里插入图片描述
    在组件里面使用mutations
    在这里插入图片描述
    如果mutations里面有很多方法需要调用

    在这里插入图片描述

    actions共享异步模块

    默认写法
    在这里插入图片描述
    mapActions写法
    在这里插入图片描述

    共享计算getters模块(相当于计算属性)

    在这里插入图片描述

    Vuex的模块化-Module

    在这里插入图片描述
    定义两个模块 user 和 setting

    user中管理用户的状态 token

    setting中管理 应用的名称 name

    const store  = new Vuex.Store({
    state:{}
    mutations:{}
    getters:{}
    action:{}
      modules: {
        user: {
           state: {
             token: '12345'
           }
        },
        setting: {
          state: {
             name: 'Vuex实例'
          }
        }
      })
    

    定义child-b组件,引用modules分别显示用户的token和应用名称name

    <template>
      <div>
          <div>用户token {{ $store.state.user.token }}</div>
          <div>网站名称 {{ $store.state.setting.name }}</div>
      </div>
    </template>
    

    请注意: 此时要获取子模块的状态 需要通过 $store.state.模块名称.属性名 来获取

    模块化另一种引用方式通过getters

     getters: {
       token: state => state.user.token,
       name: state => state.setting.name
     } 
    

    请注意:这个getters是根级别的getters哦

    通过mapGetters引用

     computed: {
           ...mapGetters(['token', 'name'])
     }
    

    默认情况下,模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得多个模块能够对同一 mutation 或 action 作出响应。

    这句话的意思是 刚才的user模块还是setting模块,它的 action、mutation 和 getter 其实并没有区分,都可以直接通过全局的方式调用 如
    在这里插入图片描述

    user: {
           state: {
             token: '12345'
           },
           mutations: {
            //  这里的state表示的是user的state
             updateToken (state) {
                state.token = 678910
             }
           }
        },
    

    通过mapMutations调用

     methods: {
           ...mapMutations(['updateToken'])
      }
     <button @click="updateToken">修改token</button>
    

    命名空间 namespaced

    但是,如果我们想保证内部模块的高封闭性,我们可以采用nameSpaced来进行设置

    高封闭性?可以理解成 一家人如果分家了,此时,你的爸妈可以随意的进出分给你的小家,你觉得自己没什么隐私了,我们可以给自己的房门加一道锁(命名空间 nameSpaced),你的父母再也不能进出你的小家了

      user: {
           namespaced: true,
           state: {
             token: '12345'
           },
           mutations: {
            //  这里的state表示的是user的state
             updateToken (state) {
                state.token = 678910
             }
           }
        },
    

    调用方案1:带上模块的属性名路径

      methods: {
           ...mapMutations(['user/updateToken']),
           test () {
               this['user/updateToken']()
           }
       }
      <button @click="test">修改token</button>
    

    方案2: createNamespacedHelpers 创建基于某个命名空间辅助函数

    import { mapGetters, createNamespacedHelpers } from 'vuex'
    const { mapMutations } = createNamespacedHelpers('user')
    <button @click="updateToken">修改token2</button>
    

    在这里插入图片描述

    展开全文
  • vuex

    2021-01-12 20:04:29
    文章目录前言一、vuex使用步骤二、vuex基本的对象 前言 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。引自...


    前言

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。引自官方


    一、vuex使用步骤

    // 引入Vue、Vuex三方件
    import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    const store = new Vuex.Store({
      modules: {
        user,
        search
      },
      getters
    })
    
    new Vue({
      el: '#app',
      router,
      store,
      components: { App },
      template: '<App/>'
    })
    

    二、vuex基本的对象

    • getters:派生状态。也就是set、get中的get,有两个可选参数:state、getters分别可以获取state中的变量和其他的getters。外部调用方式:store.getters.personInfo()。就和vue的computed差不多;
    const store = new Vuex.Store({
      state: {
        todos: [
          { id: 1, text: '...', done: true },
          { id: 2, text: '...', done: false }
        ]
      },
      getters: {
        doneTodos: state => {
          return state.todos.filter(todo => todo.done)
        }
      }
    })
    
    获取:this.$store.getters.doneTodosCount
    
    • state:存储状态。也就是变量;
    • mutations:提交状态修改。也就是set、get中的set,这是vuex中唯一修改state的方式,但不支持异步操作。第一个参数默认是state。外部调用方式:
    const store = new Vuex.Store({
      state: {
        count: 1
      },
      mutations: {
        increment (state,payload) {
          // 变更状态
          state.count += payload.amount
        }
      }
    })
    
    // 提交方式(10,称为载荷)
    store.commit('increment', {
        amount:10
    })
    
    • actions:和mutations类似。不过actions支持异步操作。第一个参数默认是和store具有相同参数属性的对象。外部调用方式:store.dispatch(‘nameAsyn’)。
    const store = new Vuex.Store({
      state: {
        count: 0
      },
      mutations: {
        increment (state) {
          state.count++
        }
      },
      actions: {
        increment (context) {
          context.commit('increment')
        }
      }
    })
    
    • modules:store的子模块,内容就相当于是store的一个实例。调用方式和前面介绍的相似,只是要加上当前子模块名,如:store.a.getters.xxx()
    const moduleA = {
      state: { count: 0 },
      mutations: {
        increment (state) {
          // 这里的 `state` 对象是模块的局部状态
          state.count++
        }
      },
    
      getters: {
        doubleCount (state) {
          return state.count * 2
        }
      }
    }
    
    const store = new Vuex.Store({
      modules: {
        a: moduleA,
        b: moduleB
      }
    })
    
    store.state.a // -> moduleA 的状态
    store.state.b // -> moduleB 的状态
    

    展开全文
  • 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>
    
    展开全文
  • VueX

    2020-07-12 20:15:32
    VueX(Vue状态管理模式) 1、首先应该了解什么是vuexvuex是适用于在vue开发项目时使用的状态管理工具。vue为被频繁使用的值提供了一个管理工具——vuex。 2、阐述vuex在项目中的使用过程和搭建过程? store仓库...

    VueX(Vue状态管理模式)

    1、首先应该了解什么是vuex?

    vuex是适用于在vue开发项目时使用的状态管理工具。

    2、阐述vuex在项目中的使用过程和搭建过程?

    • 首先在src目录下创建一个sotre文件夹,然后在文件夹中创建一个index.js文件

    • 接着就是store仓库的安装了

      安装:cnpm install store --save
      在main.js中引入:import store from './store'
      把store挂载到当前vue实例上
      
    • 下一步就是安装vuex

       安装:cnpm install vuex --save
       初始化store下的index.js内容: import Vue from "vue"
       						      import Vuex from "vuex"
       							  Vue.use(Vuex)
       							  let store =  new Vuex.Store({})
       							  export default store
      

    在这里插入图片描述

    3、vuex在项目中的应用?(属性)

    • state:是仓库,用来存储状态(变量)。在组件中通过使用 this.$store.state.属性名 来使用
    • mutations:用来写方法,它是可以直接操作state中的数据,可以同步,但是不可以异步。在组件中通过使用 this.$store.commit(“方法名”,参数) 来使用,和组件中的自定义事件类似。当我们需要提交多个参数时,就可以把他们放在一个对象中来提交
    • getters:类似于state的计算属性。在组件中通过使用 this.$store.getters.方法名 来使用
    • actions:在mutation中进行提交,会引起数据失效,所以用actions来进行异步修改状态。由于是异步操作,所以就可以为异步操作封装一个promise对象。在组件中通过使用 $store.dispath(’’) 来使用。
    • models:它是命名空间的处理,为了开发大型项目,可以使用模块化管理模式。每个模块都拥有自己的state、mutation、action、getter。我们在使用的过程中,首先需要在store仓库下新建一个person.js文件,在文件中写state、mutations、actions、getters,然后在store仓库下的index.js文件中的models下挂载person.js文件,这样就可以使用了。
    • plugins:类似于本地仓库
      下载:cnpm install vuex-persistedstate --save
      首先需要在store仓库中引入:import createPersistedState from “vuex-persistedstate”
      然后在 let store下写入:plugins:[createPersistedState()]

    4、vuex辅助函数

    vuex为我们提供了一些非常方便的辅助函数,比如mapState、mapGetter、mapMutation、mapAction

    • mapState:引入:import { mapState } from 'vuex
      有三种方式:
      • 第一种:对象:如果使用箭头函数,当vuex中的state和当前组件的state,含有相同的变量名称时,this获取的是vuex中的变量,而不是局部变量
        computed: mapState({
        // 箭头函数
        count: state => state.count,
        // 这里为了能够使用this获取局部变量localCount,必须使用常规函数
        countPlusLocalState (state) {
        return state.count + this.localCount
        }
        })
      • 第二种:数组:当映射的计算属性名称与state的子节点名称相同时,我们也可以给mapState传一个字符串数组。
        computed: mapState([
        // 映射 this.count 为 store.state.count
        ‘count’
        ])
      • 第三种:对象展开运算符:mapState函数返回的是一个对象。如果需要将它与局部计算属性混合使用时,通常我们需要一个工具函数将多个对象合并为一个,因此我们可以将最终对象传给computed属性。也可以使用...mapState([]),但前提是映射的计算属性名称与state的子节点名称相同,如果state在vuex的modules中,则不成功。
        computed: {
        localComputed () {},
        …mapState({})
        }
    • mapGetters:将store中的getter映射到局部计算属性
      computed: {
      …mapGetters([
      ‘oneGetter’,
      ‘anotherGetter’
      ])
      }
    • mapMutations:使用mapMutations辅助函数将组件中的methods映射为store.commit调用。
      methods: {
      // 将this.tips映射成 this.$store.commit(‘tips’)
      …mapMutations([‘tips’])
      }
    • mapAction:使用mapActions辅助函数将组件中的methods映射成store.dispatch调用
      methods: {
      // 将this.tips映射成 this.$store.dispatch(‘tips’)
      …mapActions([‘tips’])
      }

    5、命名空间

    • 概念:默认情况下,模块内部的 action、mutation 和 getter 是注册在全局命名空间的。
    • 弊端1:不同模块中有相同命名的mutations、actions时,不同模块对相同的 mutation 或 action 作出响应。
    • 弊端2:当一个项目中store分了很多模块的时候,使用辅助函数时,就很难查询,不便于后期的维护。

    可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后,它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。
    在模块中添加 namespaced: true, 开始命名空间。在根store中引入模块并挂载,在组件中使用,模块中定义的“permissionList” state

    1. 第一种方式:导入辅助函数mapState
      import { mapState } from “vuex”;
      export default {
      props: {
      data: {
      type: Object,
      default: “chart”
      }
      },
      data() {
      return {
      list: {}
      };
      },
      computed: {
      // 在辅助函数mapState的第一参数上,填写上模块的命名空间名。根据挂载方式不同,此处的命名空间名就是 wechatType 或 aaa。
      …mapState(‘命名空间名’, [“permissionList”])
      },
    2. 第二种方式:通过使用 createNamespacedHelpers 创建基于某个命名空间辅助函数。它返回一个对象,对象里有新的绑定在给定命名空间值上的组件绑定辅助函数
      import { createNamespacedHelpers } from “vuex”;
      const { mapState } = createNamespacedHelpers(‘命名空间名’)
      export default {
      computed: {
      …mapState([“permissionList”])
      }
    展开全文

空空如也

1 2 3 4 5 ... 20
收藏数 37,568
精华内容 15,027
关键字:

vuex

vue 订阅