vuex简单梳理1、state及辅助函数mapState

vuex可以理解为是一个vue提供的公共仓库，里面存储里多个组件都会用到的数据、方法等。

但是如果你的一个不论复杂或简单的组件，其数据和方法只是其私有属性，不要用vuex,这么做不仅不酷反而造成了不必要的性能浪费

1.state

其内容大致等同于组件里的data,使用时有挂到data和computed，或直接使用这几种方式。后面两种可以响应数据的变化。

vuex中

 

const state = {
   
    liuDeHua:12,
    zhangXueYou:21,
    
}

 

组件中

 <p>liu:{{liu}}</p>
 <p>zhang:{{zhang}}</p>
        
<input type="button" :value="$store.state.liuDeHua"   @click="$store.state.liuDeHua+=2">
 <input type="button" :value="$store.state.zhangXueYou" @click="$store.state.zhangXueYou+=1">
<input type="button" :value="test"  @click="test += 1">

   data(){
            return{ 
                ones:'大小',
                from:'China',
                test:this.$store.state.liuDeHua
            }
        },
        computed:{
            
               zhang(){
                   return this.$store.state.zhangXueYou
               },
　　　　　　　　　　

　　　　　　　　　liu(){
                   return this.$store.state.liuDeHua
               }

},

初始状态

分别点击三个按钮可以 看到区别

 

挂在计算属性和直接引用的在state的值发生变化时，在组件中能够时时响应。在data中相当于成为了独立在组自身中的属性，不受state变化影响，也不影响state的变化

 

2.mapState

mapState是state对应的辅助函数，作用说白了就是可以能简单地使用state,不用在通过$store.state来使用vuex里的state，需要挂到computed下

先引入mapState

 

import {mapState} from "vuex";

 

 

 

第一种直接引用

 

computed:mapState(["liuDeHua","zhangXueYou"]),
            
           
       

 

第二种函数式引用

computed:mapState({
                liu(state){
                    return state.liuDeHua + this.from;//this指vue实例，
                },
　　　　　　　　　　from : (state)=>{
　　　　　　　　　　　　　　return state.liuDeHua + this.from; //箭头函数不能用this
　　　　　　　　　　}
                // 自己新加的计算属性也可以放在mapState里
                one(){
                        return this.from + this.ones;
                    },
            }),
           
        

个人推荐第三种写法，用解构的方法将vuex里的数据和组件中的计算属性区分开来

computed:{          
            ...mapState({
                liu(state){
                    return state.liuDeHua;
                },
                
             
            }),
            ...{
                    zhang(){
                        return this.from + this.ones;

 } } },