vuex的基础使用

axios不挂载写法

axios.post("http://localhost:8080/user1/demo", lists).then((result) => {
      console.log(result)
  }).catch((err) => {
      console.log(err)
  });

定义store

import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    // 定义一个全局的变量                           
    count: 0
  },
  mutations: {
    sub(state) {
      state.count--
    },
    addN(state, sept) {
      state.count += sept
    },
    add: state => { 
      state.count++
    },
    subN(state, stept) {
      state.count -= stept
    }
  },
  // action专门用于处理异步方法的函数
  actions: {
    addAsync(context) {
      setTimeout(() => {
        context.commit("add")
      }, 1000);
    },
    addnAsync(context, stept) {
      setTimeout(() => {
        context.commit("addN", stept)
      }, 1000);
    },
    subAsync(context) {
      setTimeout(() => {
        context.commit("sub")
      }, 1000);
    },
    subnAsync(context, stept) {
      setTimeout(() => {
        context.commit("subN", stept)
      }, 1000);
    }
  },
  modules: {
    
  },
  getters: {
    showNum: state => { 
      return "当前的count的数量是["+state.count+"]个"
    }
  }
})

调用store中的属性

方法一

{{this.$store.state.count}}

<template>
    <div>
            <div>当前最新的Count的值:{{this.$store.state.count}}</div>
    </div>
</template>

<script setup lang="ts">

export default{
    data(){
        return {
          
        }
    },
    methods:{
       
    }
}
</script>

方法二

<template>
    <div>
        <div>当前最新的count的值:{{count}}</div>
    </div>
</template>
<script setup lang="ts">
import {mapState} from "vuex"
export default{
    data(){
        return {           
        }
    },
    computed:{
        ...mapState(['count']),
    },
 }
</script>

改变store中的属性

方法一

注意不能在页面中直接修改属性的值，要调用store中的mutations中的方法进行修改store中的state中的值

<template>
    <div>
        <div><button @click="sub">-1</button></div>
    </div>
</template>

<script setup lang="ts">
export default{
    data(){
        return {
           
        }
    },
    methods:{
        sub(){
            this.$store.commit("sub")
        }    
    }
}
</script>

方法二

<template>
    <div>
        <div><button @click="jisuan">+3</button></div>
    </div>
</template>

<script setup lang="ts">
import {mapMutations} from "vuex"
export default{
    data(){
        return {
            
        }
    },
    methods:{
        ...mapMutations(['addN']),
        jisuan(){
            this.addN(3);
        },
    }

}
</script>

异步处理state中的属性

要在store文件中的action中处理

方法一

<template>
    <div>
        <div><button @click="jisuan2">异步+N</button></div>
    </div>
</template>
<script setup lang="ts">
export default{
    data(){
        return {

        }
    },
    methods:{
        jisuan2(){
            this.$store.dispatch("addnAsync",10)
        }
    }
}
</script>

方法二

<template>
    <div>
         <div><button @click="jisuan1">异步-1</button></div>
    </div>
</template>
<script setup lang="ts">
import {mapActions} from "vuex"
export default{
    data(){
        return {
        }
    },
    methods:{
        ...mapActions(['subAsync']),
        jisuan1(){
            this.subAsync();
        }
    }
}
</script>