Vuex的基本使用以及访问和修改状态的方法

一.Vuex的定义

Vuex是一个专门为 Vue.js应用程序开发的状态管理模式,它采用集中式存储管理应用的所有组件状态。vuex提供了一个在多个组件间共享状态的插件,做到了响应式

那么状态管理到底是什么呢?

  • 我们可以简单的将其看成把多个组件共享的变量全部存储在一个对象里面
  • 然后把这个对象放在顶层的Vue实例中,让其他组件都可以使用

二.Vuex具体管理哪些状态

  • 比如用户的登录状态、用户名称、头像、地理位置等
  • 比如商品的收藏、购物车的物品等

三.Vuex的使用

1.因为Vuex属于一个插件,要想使用时,需要先进行安装npm install vuex --save
2.在src文件夹下,新创建store文件夹,并在其内部新建index.js文件

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

// 1.安装插件
Vue.use(Vuex)

//2.创建对象
const store = new Vuex.store({
	state:{}, // 存放状态(即变量)
	mutations:{},
	actions:{},
	getters:{},
	modules:{},
})

//3.导出store对象
export default store

3.在main.js文件中进行导入
在这里插入图片描述
4.在共享状态时,使用$store.state.counter,即使用store对象中state内部的一个状态

三.mutation案例的监听

mutation中用来存放方法。当我们想让state中变量的状态发生变化时,必须通过mutation中的方法来更改因为只有通过mutation更改的变量我们才能通过devtools跟踪变量状态的变更路径,方便回溯。

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

// 1.安装插件
Vue.use(Vuex)

//2.创建对象
const store = new Vuex.store({
	state:{ // 存放状态(即变量)
		count:1000
	}, 
	mutations:{
		increment(state) { // mutation中的方法要设置state参数
            state.count++
        },
        decrement(state) {
            state.count--
        }
	},
	actions:{},
	getters:{},
	modules:{},
})

//3.导出store对象
export default store

在使用时,其他组件利用store对象中保存的状态即可

  • 通过this.$store.state.属性 的方法来访问状态
  • 通过this.$store.commit(‘mutation中的方法’) 来修改状态
// App.vue
<template>
  <div id="app">
    <p>{{count}}</p>
    <button @click="addition">+</button>
    <button @click="decrement">-</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  computed:{
    count() {
      return this.$store.state.count
    }
  },
  methods:{
    addition() {
      this.$store.commit('increment')
    },
    decrement() {
      this.$store.commit('decrement')
    }
  }
}
</script>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值