uniapp 引入vuex

目录

• state
• getters
• mutations 同步方法提交一定要经过commit 才可以修改state的数据
• action 异步方法提交通过dispatch => commit => state

根目录下起个 store/index.js

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

Vue.use(Vuex)


export default new Vuex.Store({
	state:{
		
	},
	// 计算属性
	getters:{
		
	},
	// 同步方法
	mutations:{
		
	},
	//异步方法
	actions:{
		
	}
	
	
	
})

main.js

import store from "./store/index.js"

Vue.prototype.$store = store

const app = new Vue({
	store,
    ...App
})

应用场景：

拿到state中的数据

第一种方法：直接打印

onLoad() {
			// console.log(this.$store.state.list);
			// console.log(JSON.stringify(this.$store.state.list));
		}

第二种：

import {mapState} from "vuex"

computed:mapState({
			list:state => state.list
		}),
		
		onLoad() {
			// console.log(this.$store.state.list);
			// console.log(JSON.stringify(this.$store.state.list));
			
			//第二种：
			console.log(this);
			console.log(this.list);
		}

第三种：对象类型用于高级的 重命名 对数据要进行处理的

computed:mapState({
			// list:state => state.list
			// diylist:"list"
            //拿到数据list中特定条件的值为比如：true 
			newList(state){
				return state.list.filter(item => item.status) //filter返回的是一个数组
			}
			
		}),
		// 把计算属性给占用了
        
        
			// 3
			// console.log(this.diylist);
			
			//4
			// console.log(this.newList);

第四种：数组的 就适用于直接拿state里面的数据

computed:{
		
			
			//数组的 就适用于直接拿state里面的数据
			...mapState([
				'list'
			])
		},
        
        	console.log(this.list)

getters

getters:{
		activeList:(state)=>{
			//返回true的值
			return state.list.filter(item=>item.status)
		},
		noActiveList:(state)=>{
			//返回true的值
			return state.list.filter(item=>!item.status)
		}
	},

一、第一种

console.log(this.$store.getters.activeList);

二、第二种

import {mapState,mapGetters} from "vuex"

	computed:{
			//getters
			...mapGetters(['activeList','noActiveList'])
		},
        
        //打印
        console.log(JSON.stringify(this.activeList));
        	console.log(JSON.stringify(this.noActiveList));

三、第三种

//对象的方式
			...mapGetters({
				activeList:'activeList',
				noActiveList:'activeList'
			})

四、第四种

二次过滤 拿到activeList 中为true 切num大于5的

getters:{
	
		
		getList(state,getters){
			return	getters.activeList.filter(v=>{
				return v.num>5
			})
		}
	},
    
    
    

...mapGetters({
				getList:'getList'
			})


			console.log(JSON.stringify(this.getList));

getters传参

页面中要拿到 id 为15的那个数据 15是我在页面中传递的

getters:{
	
		//箭头函数还可以这样写！！！
		getById:(state)=>(id)=>{
			// return console.log(id)
			return state.list.filter(v=>{
				return v.id === id 
			})
		}
	},

...mapGetters({
				
				getById:'getById'
			})
            
            
            console.log(this.getById(15));

mutations

	// 同步方法
	mutations:{
		inc(state){
			state.number++;
			console.log(state.number);
		}
	},
    //调用
    this.$store.commit('inc')

第二种：

import {mapState,mapGetters,mapMutations} from "vuex"

...mapMutations(['inc']),

this.inc();

改成nuber += n

	// 同步方法
	mutations:{
		inc(state,n){
			state.number += n;
			console.log(state.number);
		}
	}

import {mapState,mapGetters,mapMutations} from "vuex"

...mapMutations(['inc']),



this.inc(20);

自定义名称就用{}

...mapMutations({INC:'inc'}),
this.INC(30)

actions

	import {mapState,mapGetters,mapMutations,mapActions} from "vuex"

...mapMutations({
				INC:'inc'
			}),


this.AsyncInc(50)

对象的解构

//异步方法
	actions:{
		//页面调用异步的方法传值过来每隔两秒 + 原来的number 
		// context => this.$store
		// AsyncInc(context,n){
		// 	// console.log(n)
		// 	setInterval(()=>{
		// 		context.commit('inc',n)
		// 		console.log(context.state.number)
		// 	},2000)
		// }
		
		AsyncInc({commit,state},n){
			// console.log(n)
			setInterval(()=>{
				commit('inc',n)
				console.log(state.number)
			},2000)
		}
	}