Vuex的使用及知识点笔记

npm i vuex --save

import Vue from 'vue'
//导入vuex插件
import Vuex from 'vuex'

//使用vuex插件
Vue.use(Vuex)

export default new Vuex.Store({
	state:{//state相当于普通组件中的data数据域
		
	},
	getters:{//getter相当于computed对象
		
	},
	mutations:{//mutations相当于methods对象
		
	},
	actions:{
		
	},
	modules:{//分割模块
		
	}
})

export default new Vuex.Store({
	state:{//state相当于普通组件中的data数据域
		names:['胡桃','甘雨']
	}
})

 <p>{{this.$store.state.names}}</p>

export default new Vuex.Store({
	state:{//state相当于普通组件中的data数据域
		names:['胡桃','甘雨'],
		num:5
	},
	getters:{//getter相当于computed对象
		add(state){//state的数据会自动传入add的方法
			return state.num+5
		}
	}
})

<p>{{this.$store.state.names}}</p>
<p>{{this.$store.getters.add}}</p>

export default new Vuex.Store({
	state:{//state相当于普通组件中的data数据域
		names:['胡桃','甘雨'],
		num:5
	},
	getters:{//getter相当于computed对象
		add(state){
			return state.num+5
		}
	},
	mutations:{//mutations相当于methods对象
		add(state,payload){//注意：必须传入state参数，payload为自定义参数
			state.num+=payload;
		}
	}
})

<template>
	<div id='Home'>
        <p>{{this.$store.state.names}}</p>
        <p>{{this.$store.getters.add}}</p>
        <p><input type="text"  v-model="this.$store.state.num"/> <span @click="add()">+</span></p>
    </div>
</template>

<script>
export default{
	name:'Home',
	methods:{
		add(){
            // this.$store.commit('evnetName',自定义的参数)
			this.$store.commit('add',5)
		}
	}
}
</script>

export default new Vuex.Store({
	state:{//state相当于普通组件中的data数据域
		names:['胡桃','甘雨'],
		num:5
	},
	getters:{//getter相当于computed对象
		add(state){
			return state.num+5
		}
	},
	mutations:{//mutations相当于methods对象
		add(state,payload){//注意：必须传入state参数，payload为自定义参数
			state.num+=payload;
		}
	},
	actions:{
		addSync(context,payload){
			setTimeout(()=>{
                //add为mutations内定义的函数
                //通过commit调用mutations内的函数
				context.commit('add',payload)
			},1000)
		}
	},
})

<p><input type="text"  v-model="this.$store.state.num"/> <span @click="addSync()">+</span></p>

methods:{
		addSync(){
			this.$store.dispatch('addSync',2)
		}
	}

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

<h2>{{this.$store.state.a.count}}</h2>
<h2>{{this.$store.state.b.msg}}</h2>

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

export default {
  name: 'list',
  data () {
    return {
    }
  },
  computed:{
    	  ...mapState({
		  //Index则代表state的num属性
		index:'num'
	  }),
	  ...mapGetters({
		  // 属性值add则代表getters内的add方法
		  add:'add'
	  }) 
  },
  methods:{
     ...mapMutation({
		  addNum:'addNum'
	  }),
	  ...mapActions({
		  
	  }) 
  }
}