vue:状态管理(vuex),对state数据的四种存和四种取的方法

  • Post author:
  • Post category:vue




vue核心组件:



网络通信(axios)



页面跳转(router)



状态管理(vuex)

  1. 存:四种方法

    项目中使用四种方法使用vuex存值
    //1.1解释:第1种方法第1步
    data(){
        sum1:0,
        sum2:0,
        sum3:0,
        sum4:0,
    },
    methods: {
                onSubmit() {
                        // 1.1第一种方法第一步同步存
                        this.$store.commit("sum1", sum1)
                        // 2.1异步存
                        this.$store.dispatch("sum2", sum2)
                        // 3.1同步存,map
                        this.sum3(sum)
                        // 4.1同步存,map
                        this.sum4(sum)
                    })
                },
                // 3.2同步存,map
                ...mapMutations(['sum3']),
                // 4.2异步存,map
                ...mapActions( ['sum4']),
            }
    
    store文件内的js就是存放vuex的位置
    
    // vuex使用场景:项目中的token个人信息,多个组件公用的数据存放,解决路由组件传值的复杂过程
    
    export default new Vuex.Store({
      // state:数据存放地方,可以存放数组,对象,kv对
      state: {
            sum1:0,
            sum2:0,
            sum3:0,
            sum4:0,
      },
      // getters:指的是获取state中的值,获取的方式
      getters: {  
        showtoken(state){
          return state.某个值
        }
      },
      // 同步存,组件中调用什么k,这里就写什么k
      // mutations:英语->变异,改变,改变state中的值,同步的
      mutations: {
        
        // 1个参数叫做 上面的state,2个参数是组件传来的值;如果项目使用同步,直接调这个方法,改变vuex数据仓库内的值
        //3.3,4.4
        fn(state,value){
          state.某个值=value
        },
      },
      // 异步存
      // actions:行为,做出改变的行为,让mutations同步去改变
      actions: {
        // 第一个参数联系上下文; 2.传过来的值;如果项目中用异步存值调这个方法,这个方法在转mutations内对应的方法
        //4.3
        fn1(context,value){
          context.commit('fn', value)
        },
      },
      modules: {
      }
    })
    
  2. 取:四种方法

    export default new Vuex.Store({
      // state:数据存放地方,可以存放数组,对象,kv对
      state: {
            sum1:0,
            sum2:0,
            sum3:0,
            sum4:0,
      },
      // getters:指的是获取state中的值,获取的方式
      getters: {  
        //2.2,4.3
        sum2(state){
          return state.某个值
        }
      },
    
    <div> 1.1:{{this.$store.state.sum1}} </div>
    <div> 2.1:{{this.$store.getters.sum2}}  </div>
    map计算属性:
    <div> 3.1:{{token}} </div>
    <div> 4.1:{{showtoken} </div>
    import { mapGetters ,mapState} from 'vuex'
    export default {
        computed:{
    		//3.2
            ...mapState(['sum3']),
    		//4.2
            ...mapGetters(['sum2'])//提倡用这种
        }
    }
    </script>
    



版权声明:本文为xixi1811原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。