state
新建store.js文件，export default封装，让外部能引用
//定义一个常量
const state = {
count:1
}
//
export default new Vuex.Store({
state
})
vue页面引用
<template>
<h3>{
{
$store.state.count}}</h3>//1
</template>
<script>
import store from '@/vuex/store'
export default{
data(){
return{
}
},
store
}
</script>
简写，实际项目用的较多
<template>
<h3>{
{
count}}</h3>//1
</template>
<script>
import {
mapState} from '@/vuex/store'
export default{
data(){
return{
}
},
computed:{
...mapState(['count'])
}
}
</script>
getters
简单理解为获取state数据前进行对数据的处理，处理完再返回
//这里每次获取count前会加上1
const getters = {
count:function(state){
return state.count+=1;
}
}
//
export default new Vuex.Store({
state,getters
})
页面引用
<template>
<h3>{
{
count}}</h3>//2
</template>
<script>
import {
mapGetters} from '@/vuex/store'
export default{
data(){
return{
}
},
//注意，这里放在计算属性里
computed:{
...mapGetters(['count'])
}
}
</script>
mutations
这是用来修改状态的，简单理解是修改state的值
const mutations={
add(state,num){
state.count=num;
},
reduce(state){
state.count-=1;
}
}
export default new Vuex.Store({
state,getters,mutations
})
页面引用
<template>
<h3>{
{
count}}</h3>//2=》10，点击下边按钮修改为10
<button @click="addCount(10)">-</button>
</template>
<script>
import {
mapGetters,mapMutations} from '@/vuex/store'
export default{
data(){
return{
}
},
//注意，这里放在计算属性里
computed:{
...mapGetters(['count'])
}
//注意，这里放在methods里
methods:{
...mapMutations({
addCount: 'add',//左边为自定义方法名，右边对应store.js的mutations里方法名
})
}
}
</script>
actions
actions和mutaions功能一样，都是修改store里的state，不过它是异步的，mutations是必须同步的。
const actions ={
addAction({
commit}){
//直接把commit对象传过来
commit('add')//方法名和mutation里定义的一样
}，
reduceAction({
commit}){
commit('reduce')
}
}
export default new Vuex.Store({
state,getters,mutations，actions
})
页面引用
<template>
<h3>{
{
count}}</h3>//2=》10，点击下边按钮修改为10
<button @click="addAction(10)">-</button>
</template>
<script>
import {
mapGetters,mapMutations,mapActions} from '@/vuex/store'
export default{
data(){
return{
}
},
//注意，这里放在计算属性里
computed:{
...mapGetters(['count'])
}
//注意，这里放在methods里
methods:{
...mapMutations({
addCount: 'add',//左边为自定义方法名，右边对应store.js的mutations里方法名
}),
...mapActions([
'addAction',
'reduceAction'
])
}
}
</script>