uni-app的vuex使用说明书

野性酷女 2021-07-24 13:58 499阅读 0赞

Vuex是vue的状态管理工具，为了更方便的实现多个组件共享状态。

主要讲vuex的五个属性，官网的那些专业术语了，我就不来了，按自己的理解来写了，完事了，我来举例子（不用大概看例子什么意思，看怎么使用就可以了）

state    vuex的基本数据，用来存储变量，也就是我们直接可以拿来用的值
    getters  相当于state的计算属性
    mutations  相当于methods ，但是他是同步的
    actions  相当于methods ，他是异步的，，比如setInterval
    modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。
            多模块时注意方法名字不要相同

> 下面的话举例说明下，  
> 1，新建store文件  
> 2，直接引入全局main.js  
> import store from “./store”  
> Vue.prototype.$store = store  
> const app = new Vue(\{store\})

vue页面

cart.js

export default { 
    	state:{ 
    		number:1,
    		list:[
    			{ 
    				id:1,
    				name:"商品一",
    				status:false,
    				num:1
    			},
    			{ 
    				id:2,
    				name:"商品二",
    				status:true,
    				num:10
    			},	
    		]
    	},
    	getters:{ 
    		activeList:(state)=>{ 
    			return state.list.filter(v=>{    //过滤list中status为true的
    				return v.status   
    			})
    		},
    		getList:(state,getters)=>{   //第二个参数可以直接引用getters
    			return getters.activeList.filter(v=>{    //二次过滤list中status为true的当中num大于5的
    				return v.num > 5
    			})
    		},
    		getById:(state)=>(id)=>{    //过滤id
    			return state.list.filter(v=>{ 
    				return v.id === id  
    			})
    		}
    	},
    	mutations:{ 
    		inc(state,n){ 
    			state.number += n
    			console.log(state.number);
    		}
    	},
    	actions:{ 
    		AsyncInc({ commit,state},n){ 
    			 setInterval(()=>{ 
    			 console.log(state.number);
    			},2000)
    		}
    	}
    }

index.js

import Vue from "vue"
    import Vuex from "vuex"
    import cart from "@/store/modules/cart.js"
    Vue.use(Vuex)
    export default new Vuex.Store({ 
    	modules:{ 
    		cart
    	}
    })