Vue.js 3.0 学习笔记（十三）状态管理——Vuex

本文链接：https://blog.youkuaiyun.com/qq_44648936/article/details/123476806

一、什么是Vuex

Vuex是一种状态管理模式，它采用集中式存储管理应用的所有组件的数据，并以相应的规则保证数据以一种可预测的方式发生变化。
这样比较官方的解释说起来还是太抽象了，简单来说，就是通过一种特定的规则来管理整个vue项目中需要共享的数据，在修改共享的数据时就会响应式地修改所有使用这些数据的组件，对于大型项目来说更方便管理。

二、安装Vuex

main.js文件

import { createApp } from 'vue'
import App from './App.vue'
//引入vuex
import { createStore } from 'vuex'

const store=createStore({
    state(){
        return{
            count:1
        }
    }
})
const app=createApp(App)
app.mount('#app')
//使用vuex插件
app.use(store)

三、在项目中使用vuex

1、搭建一个项目

在项目中新建store文件夹
在store下新建index.js
输入以下代码

import {createStore} from "vuex";

export default createStore({
    state:{

    },
    mutations:{

    },
    actions:{

    },modules:{

    }
})

后续一一解释其中的对象

2、state对象

把共用的数据提取出来，放到状态管理的state对象中

import {createStore} from "vuex";

export default createStore({
    state:{
        name:"洗衣机",
        price:8600
    },
    mutations:{

    },
    actions:{

    },modules:{

    }
})

新建一个组件，在组件中通过store.state.xxx获取state对象的数据

<template>
  <div>
    <h1>商品名称：{{name}}</h1>
    <h1>商品价格：{{price}}</h1>
  </div>
</template>

<script>
import store from "@/store";

export default {
  name: "StateObject",
  computed:{
    name(){
      return store.state.name
    },
    price(){
      return store.state.price
    }
  }
}
</script>

<style scoped>

</style>

可以不用通过main.js配置，直接导入

3、getter对象

getter相当于state的计算属性，getter的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变，才会被重新计算。

修改index.js

import {createStore} from "vuex";

export default createStore({
    state:{
        name:"洗衣机",
        price:8600
    },
    getters:{
      getterPrice(state){
          return state.price+=300;
      }
    },
    mutations:{

    },
    actions:{

    },modules:{

    }
})

修改组件代码

<template>
  <div>
    <h1>商品名称：{{name}}</h1>
<!--    <h1>商品价格：{{price}}</h1>-->
    <h1>商品上涨后的价格：{{getPrice}}</h1>
  </div>
</template>

<script>
import store from "@/store";

export default {
  name: "StateObject",
  computed:{
    name(){
      return store.state.name
    },
    price(){
      return store.state.price
    },
    getPrice(){
      return store.getters.getterPrice
    }
  }
}
</script>

<style scoped>

</style>

4、mutation对象

修改Vuex的store数据，唯一的方法就是提交mutation，而mutation类似methods
每个mutation都有一个字符串的事件类型(type)和一个回调函数(handler)，通过commit联系

修改index.js

import {createStore} from "vuex";

export default createStore({
    state:{
        name:"洗衣机",
        price:8600
    },
    getters:{
      getterPrice(state){
          return state.price+=300;
      }
    },
    mutations:{
        addPrice(state,obj){
            return state.price+=obj.num;
        },
        subPrice(state,obj){
            return state.price-=obj.num;
        }
    },
    actions:{

    },modules:{

    }
})

修改组件代码

<template>
  <div>
    <h1>商品名称：{{name}}</h1>
<!--    <h1>商品价格：{{price}}</h1>-->
<!--    <h1>商品上涨后的价格：{{ getPrice }}</h1>-->
    <h1>商品的最新价格：{{ price }}</h1>
    <button @click="handlerAdd()">涨价</button>
    <button @click="handlerSub()">降价</button>
  </div>
</template>

<script>
import store from "@/store";

export default {
  name: "StateObject",
  computed:{
    name(){
      return store.state.name
    },
    price(){
      return store.state.price
    },
    getPrice(){
      return store.getters.getterPrice
    }
  },
  methods:{
    handlerAdd(){
      store.commit("addPrice",{
        num:100
      })
    },
    handlerSub(){
      store.commit("subPrice",{
        num:100
      })
    },
  }
}
</script>

<style scoped>

</style>

5、action对象

action类似于mutation
但是mutation修改状态时是同步，而所有的异步逻辑都应该封装在action对象中
action提交的是mutation，而不是直接变更数据状态，中间多了一个过程

修改index.js文件

addPriceasy(context){
            setTimeout(()=>{
                context.commit("addPrice",{
                num:100
             })
            },3000)
       },
      subPriceasy(context){
            setTimeout(()=>{
                context.commit("subPrice",{
                num:100
             })
            },3000)
       }

修改组件代码

<template>
  <div>
    <h1>商品名称：{{name}}</h1>
<!--    <h1>商品价格：{{price}}</h1>-->
<!--    <h1>商品上涨后的价格：{{ getPrice }}</h1>-->
    <h1>商品的最新价格：{{ price }}</h1>
    <button @click="handlerAdd()">涨价</button>
    <button @click="handlerSub()">降价</button>
    <button @click="handlerAddasy()">异步涨价(3秒后执行)</button>
    <button @click="handlerSubasy()">异步降价(3秒后执行)</button>
  </div>
</template>

<script>
import store from "@/store";

export default {
  name: "StateObject",
  computed:{
    name(){
      return store.state.name
    },
    price(){
      return store.state.price
    },
    getPrice(){
      return store.getters.getterPrice
    }
  },
  methods:{
    handlerAdd(){
      store.commit("addPrice",{
        num:100
      })
    },
    handlerSub(){
      store.commit("subPrice",{
        num:100
      })
    },
    handlerAddasy(){
      store.dispatch("addPriceasy")
    },
    handlerSubasy(){
      store.dispatch("subPriceasy")
    },
  }
}
</script>

<style scoped>

</style>