vueX快速入门

commit：调用store中某个mutation的函数
dispatch：专门触发action
store中只有mutation中的函数才有权修改state的数据

触发action的第二种方式：
1.按需导入 mapActions 函数 import {mapActions} from vuex
2.将actions函数映射为当前组件的methods方法：

methods: {
	...mapActions([‘addASync‘, ‘addNASync‘])
}

1、state

在store中定义数据，在组件中直接使用：

? store/index.js

export default new Vuex.Store({
	//state相当于组件中的data，专门用来存放全局的数据
    state: {
        num: 0
    },
    getters: {},
    mutations: {},
    actions: {},
    modules: {}
})

? Home.vue

<template>
    <div class="home">
    	<h2>Home页面的数字：{{$store.state.num}}</h2>
    </div>
</template>

<script>
export default{

}
</script>

? 或者：

<template>
	<div>
       	<h2>About页面的数字：{{num}}</h2>
    </div>
</template>

<script>
export default {
    computed: {
        num(){
            return this.$store.num
        }
    }
}
</script>

2、getters

? 将组件中统一使用的computed都放到getters里来操作（省下很多代码

export default new Vuex.Store({
    state: {
        num: 0
    },
    //相当于组件中的computed，但是getter是全局的，computed是组件内的
    getters: {
    	getNum(state) {			//state是默认参数
    		return state.num 
    	}
    },
    mutations: {},
    actions: {},
    modules: {}
})

? Home.vue

<template>
    <div class="home">
    	<h2>Home页面的数字：{{$store.getters.getNum}}</h2>
    </div>
</template>

<script>
export default{

}
</script>

3、mutation

? 是更改store中的状态的唯一方法

export default new Vuex.Store({
    state: {
        num: 0
    },
    getters: {
    	getNum(state) {		
    		return state.num 
    	}
    },
    //mutations相当于组件的methods，但是不能使用异步方法（定时器、 axios
    mutations: {
        //让num累加
        //payload是一个形参，如果组件在commit时有传参过来，就存在，没有传就undefined
        increase(state, payload) {
            state.num += payload? payload:1 ;
        }
    },
    actions: {},
    modules: {}
})

? btn.vue

<template>
    <div class="home">
    	<button @click="addFn">点击+1</button>
    </div>
</template>

<script>
export default{
	methods: {
        addFn(){
            //调用store中的mutations里的increase方法
            //传参的话，使用payload，commit是提交的意思
            this.$store.commit(‘increase‘, 2)
        }
    }
}
</script>

4、actions

? actions是store中来实现异步的

export default new Vuex.Store({
    state: {
        num: 0
    },
    getters: {
    	getNum(state) {		
    		return state.num 
    	}
    },
    mutations: {
        increase(state, payload) {
            state.num += payload? payload:1 ;
        }，
        decrease(state){
    		state.num--;
		}
    },
    //actions专门用来实现异步，实际修改状态值的依然是mutations
    actions: {
    	//点击了“减一”按钮后放慢一秒再执行
        decreaseAsync(context){
    		context.commit(‘decrease‘)
		}
    },
    modules: {}
})

? Btn.vue

<template>
    <div class="home">
    	<button @click="addFn">点击+1</button>
        <button @click="reduceFn">点击延时-1</button>
    </div>
</template>

<script>
export default{
	methods: {
        addFn(){
            //调用store中的mutations里的increase方法
            //传参的话，使用payload，commit是提交的意思
            this.$store.commit(‘increase‘, 2)
        }
        reduceFn(){
    		this.$store.dispatch(‘decreaseAsync‘)
		}
    }
}
</script>

action与mutation都是去改变store里的state，不同在于：
1.action主要处理异步操作，mutation必须同步执行。action不受限制，所以他既可以处理同步（视图触发action，action再触发mutation）也可以处理异步的操作
2.action改变状态，最后通过提交mutation
this.$store.dispatch(actionName)
3.角色定位基于流程顺序，二者角色不同
Mutation：专注于修改State，理论上是修改State的唯一途径
Action：业务代码、异步请求

5、新的写法 map辅助函数

? mapState和mapGetters在组件computed中

? mapMutations和mapActions在组件methods

? (1) 对state:

? Home.vue

<template>
    <div class="home">
    	<h2>Home页面的数字：{{$store.state.num}}</h2>
    </div>
</template>

<script>
export default{

}
</script>




<!-- 改成： -->
<template>
    <div class="home">
    	<h2>Home页面的数字：{{num}}</h2>
    </div>
</template>

<script>
//mapStore映射store过来
import {mapStore} from ‘vuex‘
export default{
	computed: {
        ...mapStore([‘num‘])
    }
}
</script>

? (2) getter:

? 同理，对于调用getNum方法，使用 import {mapGetters} from ‘vuex‘ 映射，使用 computed: { ...mapGetters([‘getNum‘]) } 后即可直接 {{getNum}} 调用方法

? (3)mutations和actions

? import {mapMutation, mapActions} from ‘vuex‘

? methods: {...mapMutations([‘increase‘]), ...mapActions([‘decreaseAsync‘])}

? @click="increase()"

6、拆分写法

? src/store/index.js

import state from ‘./state‘
import getters from ‘./getters‘
...

export default new Vuex.Store({
    state,
    getters,
    mutations,
    actions
})

? src/store/state.js

export default{
    //内容相同
    ...
}

? 以下相同

7、modules

?

? store可以认为是一个主模块，他下边还可以分解为很多子模块，子模块可以单独领出来写，写完再导入到主模块中。

? user模块也可以拥有state、getters、mutations和actions

? 所有的方法和属性该咋写咋写。但users的index.js文件需要引入namespaced：true命名空间

? 然后在store的index.js中引入到modules

$store.state.users.nickname

? 在组件中触发mutations的方法：

methods: {
	...mapMutations({
		‘changeNickName‘: ‘users/changeNickName‘
	})
}

8、MUTATION_TYPE

vueX快速入门

原文：https://www.cnblogs.com/rt8090/p/14742230.html