vuex安装,创建vuex,vuex使用案例

本文详细介绍如何在Vue.js项目中使用Vuex进行状态管理,包括组件间的状态共享与更新。通过具体示例展示了如何创建组件、配置Vuex store、使用actions及mutations等关键概念。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在终端输入

vue ui

然后再打开浏览器,在浏览器里创建相关的项目,配置的步骤内容跟脚手架的差不多。
在components文件中创建add.vue和sub.vue这两个文件,
打开store/index.js
app.vue

<template>
  <div id="app">
    <Add />
    <Sub />
  </div>
</template>
<script>
import Add from '@/components/add'
import Sub from '@/components/sub'
export default {
  components: {
    Add,
    Sub
  }
}
</script>
<style lang="less"></style>

add.vue

<template>
  <div>
    <!-- <h3>当前最新的count值为:{{ this.$store.state.count }}</h3> -->
    <!-- 此处的count是变量 -->
    <h3>当前最新的count值为:{{ count }}</h3>
    <button @click="add">+1</button>
    <button @click="addsync">+1addsync</button>
  </div>
</template>

<script>
// 导入
import { mapState } from 'vuex'
export default {
  methods: {
    add() {
      // commit()的第一个参数是store/index.js中mutations的add函数,第二个参数1是传过去的数据,是js中的num接收
      //   commit来访问mutations里面的方法
      // add的commit里面不传参
      this.$store.commit('add')
    },
    addsync() {
      // dispatch来访问actions里面方法
      this.$store.dispatch('addSync', 1)
    }
  },
  // 计算属性
  computed: {
    ...mapState(['count'])
  }
}
</script>

<style></style>

sub.vue

<template>
  <div>
    <!-- 这里是count是属性 -->
    <h3>当前最新的count值为:{{ showCount }}</h3>
    <button @click="subb">-1</button>
    <button @click="subsync()">-1addsync</button>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
  methods: {
    // mapMutations对sub进行解构了
    ...mapMutations(['sub']),
    ...mapActions(['subSync']),
    subb() {
      // this.$store.commit('sub', 1)
      // 所以这里可以直接使用了,click调用时直接传值
      this.sub()
    },
    subsync() {
      // dispatch来访问actions里面方法
      // this.$store.dispatch('subSync', 1)
      this.subSync()
    }
  },
  computed: {
    ...mapState(['count']),
    ...mapGetters(['showCount'])
  }
}
</script>

<style></style>

index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  // 里面存放的是公共的,可以空享的数据
  // 变量
  state: {
    count: 0
  },
  // 只有mutations才能修改state(状态)中的数据
  // 方法
  mutations: {
    // 第一个参数一定是state,num是vue文件中传过来的传过来的值
    //   vue文件没有传参过来,就不用第二个参数来接收
    add(state) {
      //   state.count += num
      state.count += 1
    },
    sub(state) {
      state.count -= 1
    }
  },
  // 操作异步代码,但是不能操作状态(state)中的变量,如果需要操作,可以在mutations中创建相关函数来操作state中的变量,然后在actions中再调用该函数即可
  actions: {
    //   context:上下文
    addSync(context, num) {
      //       setTimeout是异步的
      setTimeout(() => {
        // 在actions里面不能修改state里面的数据,所以调用mutations中的方法
        context.commit('add', num)
        // console.log(context)
      }, 1000)
    },
    subSync(context) {
      setTimeout(() => {
        context.commit('sub')
      }, 1000)
    }
  },
  getters: {
    showCount(state) {
      return '这是我最后一次操作count:' + state.count
    }
  },
  modules: {}
})

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值