Vue3 Vuex的使用

引入Vuex

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

javascript 复制代码
import { createStore } from "vuex";

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

javascript 复制代码
import vstore from './stores/vstore';

const app = createApp(App)

app.use(vstore)

export default app

数据对象的存储与读取

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

javascript 复制代码
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中对象的值

javascript 复制代码
<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中数据对象的值

javascript 复制代码
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
    }
  },
})
javascript 复制代码
<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中对象属性的值

objectivec 复制代码
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)
    }
  },

})
javascript 复制代码
<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

javascript 复制代码
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中

javascript 复制代码
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数据对象

javascript 复制代码
<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>
相关推荐
CssHero3 分钟前
基于vue3完成领域模型架构建设
前端
PanZonghui6 分钟前
用项目说话:我的React博客构建成果与经验复盘
前端·react.js·typescript
挽淚8 分钟前
JavaScript 数组详解:从入门到精通
javascript
言兴9 分钟前
教你如何理解useContext加上useReducer
前端·javascript·面试
sunbyte13 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | GoodCheapFast(Good - Cheap - Fast三选二开关)
前端·javascript·css·vue.js·tailwindcss
前端的日常14 分钟前
网页视频录制新技巧,代码实现超简单!
前端
前端的日常16 分钟前
什么是 TypeScript 中的泛型?请给出一个使用泛型的示例。
前端
今禾17 分钟前
一行代码引发的血案:new Array(5) 到底发生了什么?
前端·javascript·算法
ccc101819 分钟前
老师问我localhost和127.0.0.1,有什么区别?
前端
南篱21 分钟前
JavaScript 中的 this 关键字:从迷惑到精通
javascript