vuex--世上最细的男人

目录

4.1 State

4.2 Mutation

4.3Action

---

1.安装vuex的依赖包

npm install vuex --save

2.导入vuex包

import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex)

export default new Vuex.Store({
	
})

3.在main.js里引入 ，讲store对象挂载到vue的实例中

import store from './store'

new Vue({
  render: h => h(App),
  store
}).$mount('#app')

4.Vuex的五大属性

        4.1 State

          State 提供唯一的公共数据源，所有的共享数据都

要统一放到Store的state中进行存储

      定义State

 const store = new Vuex.Store({
 	state: {
 		count:0
 	}
 })

组件获取State中数据方法一：

this.$store.state.count; //count是自己定义的属性名字

组件获取State中数据方法二：

//通过mapState方法 组件里引入
improt {mapState} from "vuex"

//通过刚刚导入的mapState 方法，将该组件里用到的全局数据，映射到当前组件的computed
computed:{
    ...mapState(['count']),   //count是自己在state里定义的属性名字
}


this.count //this就可以直接获取 就像获取data函数里的属性一样的方法

 4.2 Mutation

         Mutation用于变更State中的数据

        有些同学可能会想我可以直接 this.store.state.count++ 这么修改呀，这种修改方式代码也不会报错，并且state里的数据是真的修改了，但是这种方法在vuex里是不允许的。而且也不方便公共数据集中管理

定义Mutation

export default new Vuex.Store({
	state:{
		count:0
	},
	mutations:{
		add(state){  //add是我们定义的方法 ，接受的第一个参数是state
			state.count++   //然后我们对state里的数据进行操作
		},
	}
})

调用mutation的方法一：

this.$store.commt('add');

 刚刚我们在mutation里定义add函数的时候说了第一个接受的参数是state,那能不能在传入自定义的参数呢，当然可以咯！！！

    mutation自定义参数已经传参

export default new Vuex.Store({
	state:{
		count:0
	},
	mutations:{
		add(state,plueN){ //还是老规矩第一个参数必须是state，第二个我们就可以自定义参数了
			state.count+=plueN
		},
	}
})

this.$store.commt('add'，3); //调用的时候把自己想传的参数传过去就可以啦

调用mutation方法二：

//跟mapState方法一样在组件里引入
import {mapMutations} from "vuex"

//state是映射到compoted里  mapMutation是映射到了methods里
methods:{
    ...mapMutations([add])
}

//调用方法
this.add();

//调用方法并且传参
this.add(3);

4.3Action

        Action是用于处理异步操作的

        如果通过异步操作变更数据，必须通过Action,而不能通过Mutation.但是Action不能直接修改State里的数据，vuex里只有Mutation有资格去修改State里的数据，使用Action还是要去触发Mutation去修改Stare里的数据的