vuex 配置和state、mutations应用

男娘i 2021-07-25 02:40 518阅读 0赞

vuex
    
      1、安装
        cnpm install vuex --save
    
      2、使用
    
        创建store文件夹,创建js文件
        import Vue from 'vue'
        import Vuex from 'vuex'
    
        Vue.use(Vuex)
    
        export default new Vuex.Store({
          
          存储数据
          state:{
    
            (1)获取:在其他组件中,$store.state.键名/this.$store.state.键名
            
            (2)在组件中尽量配合计算属性使用,通过mutations内的方法调用,因为计算属性可以设置set和get方法,或使用mapState方法来代替
                
                其中使用mapState来映射代替set和get方法:
                
                  (1)在使用的组件中import {mapState} from 'vuex'
                  (2)组件中三种方式使用mapState映射,模板内直接键名调用
                    1、computed:mapState(['键名1',...])   //相当于this.$store.state.键名;若使用双向绑定,需要设置监听事件配合e.target.value
                    2、computed:mapState({ 键名:'state中的键名',键名:(state)=>{return state.键名}},...,还可以设置方法来修改)
                    3、computed:{
                      //解构
                        ...mapState({
                          和2中一样的形式/或1
                        })
                    }
    
          
          方法
          mutations:{
          	用于改变state中的数据		
    		
            (1)创建:function(state,形参);在组件中,this.$store.commit('方法名',参数)
    			其中:参数只能有一个
    			
    		(2)调用:在其他组件的函数中,this.$store.commit('方法名')
    		
    		(3)调用2:this.$store.commit({
    			          type:'方法名',
    			          amount:参数
    			        })
    			        
    		(4)调用3:使用mapMutations辅助
    			import {mapMutations} from 'vuex'
    			methods:{
    			...mapMutations(['xx'])		
    		}
          }
        })
    
      3、在main.js中
    
          import store from './store'
          添加到vue实例化对象中,与router同级
          store

代码示例:  
**vuex:**

import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex);
    
    //仓库对象,存放多组件共用数据
    export default new Vuex.Store({ 
      //data
      state:{ 
          num:0,
          age:17,
          sex:'male'
      },
      //methods,尽量在这里处理state中的状态
      mutations:{ 
        //这里的方法,state形参获取state中的数据
        add:function(state)
         { 
           state.num++;
         },
         setNum:function(state,val)
         { 
           state.num=val;
         }
      },
      //异步方法(如ajax)
      actions:{ 
    
      },
      //模块
      modules:{ 
    
      }
    })

**组件:**

<template>
      <div>
       
    
    
        <h1>{ { sex}}</h1>
        <h1>{ { num}}</h1>
    
    
      </div>
    </template>
    
    <script>
      import { mapState} from 'vuex'
      export default{ 
        name:'A',
        data()
        { 
          return{ 
             count:0
          }
        },
        //set和get方式
        // computed:{ 
        // // msg:function()
        // // { 
        // // return this.$store.state.num;
        // // },
        // // num:{ 
        // // get:function(){ 
        // // return this.$store.state.num;
        // // },
        // // set:function(value){ 
        // // this.$store.commit('setNum',value);
        // // }
        // // }
        // },
    
        //数组映射方式
        // computed: mapState(['num','age','sex']),
    
        //对象映射方式
        // computed:mapState({ 
        // num:'num',
        // sex:(state)=>{return state.sex}
        // }),
    
        computed:{ 
          ...mapState({ 
            num:'num',
            sex:(state)=>{ return state.sex}，
            setNum:xxx使用mutations内的方法修改
          })
        },
        methods:{ 
          adds()
          { 
            this.$store.commit('add');
          },
          change(event)
          { 
            this.$store.commit('setNum',event.target.value)
          }
        }
      }
    </script>
    
    <style>
    </style>