前端自学之Vuex-state,getter

最新推荐文章于 2025-12-03 11:05:25 发布

原创最新推荐文章于 2025-12-03 11:05:25 发布 · 165 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #node.js

本文介绍了一个使用Vuex进行状态管理的Vue应用实例。通过定义state、mutations和getters，实现数据的状态跟踪和处理。展示了如何在组件中使用mapState和mapGetters来映射状态和获取方法。

state

import { createStore } from 'vuex'

export default createStore({
  //data
  state: {
     num:0,
     username:'农夫山泉有点甜',
     password:123456
  },
  //methods 处理状态
  mutations: {
    addNum(state){
      state.num+=2
    },
    },
  //异步方法
  actions: {
  },
  //模块
  modules: {
  }

<template>
  <div>
      <h1>账号:{{username}}</h1>
      <h2>密码：{{password}}</h2>
      <h2>red:{{red}}</h2>
      <h2>数量：{{num}}</h2>
      <input type="text" v-model="num">
      <input type="text" :value="num" @input="changeValue">
  </div>
</template>

<script>
//映射数据
import { mapState } from 'vuex'
//state在组件的应用
export default {
    data:()=> {  
        return{
            color:"red"
        }
    },
    computed: {
       /*  username:function(){
            return this.$store.state.username
        },
        password:function(){
            return this.$store.state.password
        },
        num:{
            get:function(){
                return this.$store.state.num
            },
            set:function(val){
                this.$store.commit('setNum',val)
            }
        } */
       
    },
     //第一种映射
        /* computed:mapState(['username','password','num']),
        methods:{
            changeValue:function(e){
            this.$store.commit('setNum',e.target.value)
        }
        } */
    //第二种映射方式
   /*  computed: mapState({
        username:'username',
        password:(state)=>state.password,
        red:function(state){
            return 'this.color'+state.password
        }
    }) */
    //第三种映射方式
    computed:{
        reverse:function(){
            this.color.split('').reverse().join('')
        },
        ...mapState({
        username:'username',
        password:(state)=>state.password,
        red:function(state){
            return this.color+state.password
        }
    })
        
    }
    
}
</script>

<style>

</style>

state

import { createStore } from 'vuex'

export default createStore({
  //data
  state: {
     num:0,
     username:'农夫山泉有点甜',
     password:123456
  },
  getters: {
    reverseMsg:function(state){
      return state.username.split('').reverse().join('')
    },
    mixinMsg:function(state){
      return function(val){
        return val+state.password
      }
    }
  },
  //methods 处理状态
  mutations: {
    addNum(state){
      state.num+=2
    },
    setNum(state,value){
      state.num = value
    }
  },
  //异步方法
  actions: {
  },
  //模块
  modules: {
  }
})

``

```html
<template>
  <div>
      <h1>{{$store.getters.reverseMsg}}</h1>

      <h2>{{reverseMsg}}</h2>

      <h2>{{mixinMsg}}</h2>

      <h2>{{username}}</h2>

      <h2>{{password}}</h2>

      <h2>{{mixinMsg1}}</h2>
    <h2></h2>
  </div>
</template>

<script>

import {mapGetters,mapState} from 'vuex'
let mapGetterData =mapGetters(['reverseMsg','mixinMsg']);
let mapSetterData =mapState(['username','password'])
export default {
    mounted () {
        
    },
    /* computed: {
            reverseMsg:function(){
                return this.$store.getters.reverseMsg
            }
        } */
    computed: {
        mixinMsg1:function(){
            return this.$store.getters.mixinMsg('张家界航空工业');
        },
        ...mapGetterData,
        ...mapSetterData,
}
}
</script>

<style>

</style>