vuex使用

本文详细介绍了如何在Vue项目中集成Vuex进行状态管理,包括安装配置、模块化组织状态、通过mutations和actions更新状态的具体实现。并展示了如何在main.js中引入并使用store对象。
摘要由CSDN通过智能技术生成

1.开发环境中安装 vuex :
npm install vuex --save
2

在src 目录下 , 新建一个 store 文件夹,方便维护管理 , 然后在里面新建一个 index.js :

import Vue from 'vue'
import Vuex from 'vuex'
import user from './user.js' // 用户信息
import car from './car.js' //购物车
Vue.use(Vuex)
//组件多了之后 , 状态也多了 , 这么多状态都堆在 store 文件夹下的 index.js 不好维护
//可以使用 vuex 的 modules

export default new Vuex.Store({
	modules:{
		user:user,
		car
	},
	 state: {
		 
	},
	 mutations: {
	   
	},
	 actions: {

	}
})

在main.js中引入index.js  并在实例化vue对象中加入store对象

//使用vuex
import store from './static/state/index.js'

const app = new Vue({
	store,//在vue实例中使用store
    ...App
})

3,modules管理的user.js代码

const user = {
    state: {
        token: token,
        userList:{    //用户信息
           tel:null,
		   username: ''
        },
    },
    //mutations 用来管理修改state
    mutations :{
	   addUserlist(state,str){ //这里的state对应着上面这个state
		    state.userList= str
	   },
	   addToken(state,str){
		   state.token=str
	   }
    },
    actions:{

    }
}

export default user;//抛出

/

使用
import store from './state/index.js'
console.log( store.state.user.http)

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值