什么是vuex
vue状态管理工具,提供这样一个在多个组件间共享状态的插件。
在Vue中,多组件的开发给我们带来了很多的方便,但同时当项目规模变大的时候,多个组件间的数据通信和状态管理就显得难以维护。而Vuex就此应运而生。将状态管理单独拎出来,应用统一的方式进行处理,在后期维护的过程中数据的修改和维护就变得简单而清晰了。Vuex采用和Redux类似的单向数据流的方式来管理数据。用户界面负责触发动作(Action)进而改变对应状态(State),从而反映到视图(View)上。

比如用户的登录状态、用户名称、头像、地理位置信息等等,需要在多个界面进行状态共享。
Vuex的使用:
开始:安装vuex
npm install --save vuex
1.先提取出一个公共的store对象,用于保存在多个组件中共享的状态。
import Vue from 'vue'
import Vuex from 'vuex'
//1.安装插件
Vue.use(Vuex)
//2.创建store对象
const store = new Vuex.Store({
state:{
cartList:[]
},
mutations:{
//唯一的目的就是修改state中的状态
//每个方法尽可能完成单一的事件
add_counter(state, payload){
payload.count++
},
add_counter(state, payload){
state.cartList.push(payload)
},
actions: {
addCart(context, payload) {
// state.cartList.push(payload)
// let index = state.cartList.indexOf(payload)
// 1.查找数组中是否含有该商品
let oldProduct = context.state.cartList.find(item => item.iid === payload.iid)
// 2.判断oldProduct
if(oldProduct){
// oldProduct.count += 1
context.commit(ADD_COUNTER, oldProduct)
}else{
payload.count = 1
context.commit(ADD_TO_CART, payload)
}
}
},
})
//3.挂载到vue实例上
export default store
2.将store对象放置在new Vue对象中,这样可以保证在所有的组件中都可以使用到,在main.js中写
import Vue from 'vue'
import App from './App.vue'
import router from './router'
//导入
import store from './store/index.js'
Vue.config.productionTip = false
Vue.prototype.$bus = new Vue()
new Vue({
render: h => h(App),
router,
//挂载
store
}).$mount('#app')
3.在其他组件中使用store对象中保存的状态即可
通过this.$store.state.属性的方式来访问状态
this.$store.dispatch('addCart', product)来修改状态
Vuex的核心概念:
State单一状态树
Getters:方便别的组建获取state属性,如下:
export default {
cartLength(state) {
return state.cartList.length
}
}
在别的组建可通过以下代码进行获取状态
this.$store.getters.cartLength
也可以使用mapGetters
import { mapGetters } from 'vuex'
export default {
name: "Cart",
components:{
NavBar
},
computed:{
...mapGetters(['cartLength'])
}
}
Mutation:Vuex的store状态的更新唯一方式:提交Mutation
传参可传递对象

Action:
由于不能在mutation中进行一步操作,但是某些情况, 我们确实希望在Vuex中进行一些异步操作, 比如网络请求, 必然是异步的. 这个时候怎么处理呢?
Action类似于Mutation, 但是是用来代替Mutation进行异步操作的.



Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex包括State、Getters、Mutations和Actions等核心概念,用于在组件间共享和管理状态。例如,用户登录状态、购物车数据等可以在全局范围内访问和更新。在项目中,通过安装Vuex、创建store对象并挂载到Vue实例上来使用。Vuex使得复杂项目的状态管理和数据流控制更为有序和易于维护。

被折叠的 条评论
为什么被折叠?



