vuex学习笔记---四大金刚state，getters，mutations，actions

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>{{$store.getters.count}}</h3>
         <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里
            //this.$store.commit('add',10)
			methods:{
				...mapMutations({
					addCount: 'add',//左边为自定义方法名，右边对应store.js的mutations里方法名
				})
			}
        }
    </script>

actions

actions和mutaions功能一样，都是修改store里的state，不过它是异步的，mutations是必须同步的。

    const actions ={
        addAction({commit},num){//直接把commit对象传过来
            commit('add',num)//方法名和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里方法名
				}),
            	//this.$store.dispatch('add',10)
				...mapActions([
					'addAction',
					'reduceAction'
				])
			}
        }
    </script>