Vue3 Vuex的使用

引入Vuex

在./stores/vstore文件夹下的index.js中引入createStore，并配置全局的store

import { createStore } from "vuex";

在main.js中引入./stores/vstore

import vstore from './stores/vstore';

const app = createApp(App)

app.use(vstore)

export default app

数据对象的存储与读取

创建Vuex Strore在state中声明要存储的数据对象

export default createStore({
  // 数据，相当于data
  state:{
    userinfo:{
      name:"Alisa",
      color:"yellow",
      age:"33"
    },
    golbalgood:{
      name:"pen",
      color:"black",
      num:100
    },
    populars:[
      {
        num:100, name:"one hundrerd"
      },
      {
        num:200, name:"two hundrerd"
      },
      {
        num:300, name:"three hundrerd"
      },
      {
        num:400, name:"four hundrerd"
      },
    ]
  }
})

读取state中对象的值

<template>
  <div class="box">
    <div class="back">
      <div class="show">全局store中的userinfo的name：{{ $store.state.userinfo.name }}</div>
      <div class="show">全局store中的golbalgood的num：{{ $store.state.golbalgood.num }}</div>
    </div>
  </div>
</template>

<script>

import { useStore } from "vuex";

export default{
 
  setup(props, context){
    const store = useStore()
    const popularNames = store.getters.moreTwoPopular
    return {
      store,
      popularNames,
    }
  },
  data(){
    return {
      
    }
  }
}

</script>

<style lang="less" scoped>

.showtxt{
  padding: 5px;
  font-size: 20px;
}

.btn{
  background-color: cadetblue;
  padding: 2px 5px 2px 9px;
  margin: 20px;
}

.back{
  background-color: antiquewhite;
  .show{
  padding: 5px;
  font-size: 20px;
  }
}

</style>

在mutation中改变state中数据对象的值

export default createStore({
  // 数据，相当于data
  state:{
    golbalgood:{
      name:"pen",
      color:"black",
      num:100
    }
  },
  // 里边可以定义很多方法，用于操作state中的数据
  mutations:{
    changeGlobalGoodColor(state,color){
      state.golbalgood.color = color
    },
    changeGlobalGoodName(state, name){
      state.golbalgood.name = name
    }
  },
})

<template>
  <div class="box">
    <h3>2 改变vuex中的数据</h3>
    <div class="back">
      <div>
        <span class="showtxt">全局store中globalgood的color：{{ $store.state.golbalgood.color}}</span>
        <span class="btn" @click="changeGlobalGoodColor">通过commit触发mutations change</span>
      </div>
      <div>
        <span class="showtxt">全局store中globalgood的name：{{ $store.state.golbalgood.name }}</span>
        <span class="btn" @click="changeGlobalGoodName">通过dispatch触发actions change</span>
      </div>
    </div>
  </div>
  
</template>

<script>
import { useStore } from "vuex";

export default{
  setup(props, context){
    const store = useStore()
    const popularNames = store.getters.moreTwoPopular
    return {
      store,
      popularNames,
    }
  },
  data(){
    return {
      
    }
  },
  methods:{
    changeGlobalGoodColor(){
      this.$store.commit("changeGlobalGoodColor", "white~")
    },
    changeGlobalGoodName(){
      this.$store.dispatch("changeGlobalGoodName", "paper")
    }
  }
}

</script>

<style lang="less" scoped>

.showtxt{
  padding: 5px;
  font-size: 20px;
}

.btn{
  background-color: cadetblue;
  padding: 2px 5px 2px 9px;
  margin: 20px;
}

.back{
  background-color: antiquewhite;
  .show{
  padding: 5px;
  font-size: 20px;
  }
}

</style>

getter读取数据

通过getter获取state中对象属性的值

import { createStore } from "vuex";

export default createStore({
  // 数据，相当于data
  state:{
    populars:[
      {
        num:100, name:"one hundrerd"
      },
      {
        num:200, name:"two hundrerd"
      },
      {
        num:300, name:"three hundrerd"
      },
      {
        num:400, name:"four hundrerd"
      },
    ]
  },
  // 类似于组件的计算属性
  getters:{
    moreTwoPopular(state){
      return state.populars.filter(item=>item.num>200)
    }
  },

})

<template>
  <div class="box">
    
    <div class="back">
      <div v-for="(item, index) in popularNames" :key="index">
        <!-- <span class="showtxt"> -->
          全局store中globalgood过滤条件后的name：{{ item.name }}
        <!-- </span> -->
      </div>
    </div>
  </div>
</template>

<script>
import { useStore } from "vuex";

export default{
  setup(props, context){
    const store = useStore()
    const popularNames = store.getters.moreTwoPopular
    return {
      store,
      popularNames,
    }
  }
}

</script>

<style lang="less" scoped>

.showtxt{
  padding: 5px;
  font-size: 20px;
}

.btn{
  background-color: cadetblue;
  padding: 2px 5px 2px 9px;
  margin: 20px;
}

.back{
  background-color: antiquewhite;
  .show{
  padding: 5px;
  font-size: 20px;
  }
}

</style>

vuex使用modules引入拆分得store

下面是一个拆分出的store，car.js

export default {
  state:{
    name:"byd",
    color:"white",
    speed:"300"
  },
  mutations:{
    changeCarName(state, name){
      state.car.name = name
    },
    changeCarColor(state, color){
      state.car.color = color
    },
    changeCarSpeed(state,speed){
      state.car.speed = speed
    }
  },
  actions:{
    changeCarName(context, name){
      setTimeout(() => {
        context.commit('changeCarName', name)
      }, 300);
    },
    changeCarColor(context, color){
      setTimeout(() => {
        context.commit('changeCarColor', color)
      }, 3000);
    },
    changeCarSpeed(context,speed){
      setTimeout(() => {
        context.commit('changeCarSpeed', speed)
      }, 3000);
    }
  }
}

将car.js引入到全局store中的modules中

import { createStore } from "vuex";
import car from "./modules/car.js";

export default createStore({
  // state过长时用于分割成多个state，每个里边可以包含state、mutations、actions，getter这些属性
  modules:{
    car,
  }
})

在自定义组件ComA中使用car.js中存储的car数据对象

<template>
  <div class="box">
    <span>使用Vuex中的modules中的模块Car,</span>
    <span>获取Car的name: {{ name }},</span>
    <span>获取Car的color: {{ color }},</span>
    <span>获取Car的speed: {{ speed }}</span>
    <div class="btn" @click="clickbtn"> tap </div>
  </div>
</template>

<script>
import { useStore } from "vuex";
export default{
  setup(){
    const store = useStore()
    return{
      store
    }
  },
  data(){
    return {
      name:"1",
      color:"2",
      speed:"3",
    }
  },
  methods:{
    clickbtn(){
      console.log("ComA clickbtn", this.store.state.car.name)
      this.name = this.store.state.car.name
      this.color = this.store.state.car.color
      this.speed = this.store.state.car.speed
    }
  }
}
</script>

<style lang="less" scoped>
.box{
  display: flex;
  flex-direction: row;
  background-color: antiquewhite;
  align-items: center;
  margin-top: 20px;
  .btn{
    margin-left: 15px;
    padding: 2px 20px 2px 20px;
    background-color: aquamarine;
  }
}
</style>