vue引入vuex的使用

博客介绍了利用npm包管理工具安装vuex的方法,包括新建文件夹和文件、引入vue和vuex并使用Vue.use引用。还阐述了state管理要点,如不能直接修改,应通过mutations同步修改,映射到组件变量应在computed中,同时介绍了mapState和mutations的映射用法。

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

1.利用npm包管理工具,进行安装 vuex。在控制命令行中输入下边的命令就可以了 npm install vuex --save
2.新建一个文件夹,并在文件夹下新建store.js文件,文件中引入我们的vue和vuex。
import Vue from ‘vue’;
import Vuex from ‘vuex’;
3.使用我们vuex,引入之后用Vue.use进行引用。
4 在main js文件中
在这里插入图片描述
改变state不能直接修改,这样直接修改state的话是一直异步操作,而store里面的状态是整个项目共享的,异步操作的话就会出现一个组件的状态已经修改,另外一个组件的状态因为异步的原因不能及时更新,出现这种不是共享状态的尴尬情况,而mutations修改state是一种同步行为,避免上述问题

管理state要映射到某个组件内的变量,应在computed中而不是在data里面(data是有缓存的,Vuex中值改变了,没法做到响应,在computed中,虽然也有缓存,但会自动监视依赖)。

export default{
//错误写法
 data(){
	        return {
	            number: this.$store.state.number
	        }
	    },
//正确写法
	    computed:{
	        number(){
	            return this.$store.state.number
	        } 
	    }
}

上述写法其实可以简洁些(如果有十个数据要映射就要写十个这样的方法,太麻烦),vue 提供了 mapState 函数,它把state 直接映射到我们的组件中。
使用mapState 之前要先引入它。两种用法(接受一个对象,或接受一个数组)
对象的方法

 import {mapState} from "vuex"; // 引入mapState 
 export default {
      // 下面这两种写法都可以
				  computed: mapState({
				   count: state => state.count // 组件内的每一个属性函数都会获得一个默认参数state, 然后通过state 直接获取它的属性更简洁  
				   count: 'count' // 'count' 直接映射到state 对象中的count, 它相当于 this.$store.state.count,
				  })
 }

数组的方法

 import {mapState} from "vuex";
 export default {
      computed: mapState(["count"])// 数组
 }

mutations映射,两种用法(接受一个对象,或接受一个数组)

    import { mapMutations } from 'vuex'
    export default {
      methods: {
         //数组形式
		     ...mapMutations([
			      'increment' // 映射 this.increment() 为 this.$store.commit('increment')
			      ]),
	     //对象形式
			  ...mapMutations({
			      add: 'increment' // 映射 this.add() 为  this.$store.commit('increment')
    		 })
     }}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值