vuex的一个demo，数据拿到界面上

1.拿到store的一个值，并实现自增

<template>
    <div>
        <button @click="add">add</button>
        {{getuser}}
    </div>
</template>
<script>
import {mapState,mapActions} from 'vuex'
export default {
    data () {
        return {
            // 在data中拿到user值，赋值给getuser
            getuser: this.$store.state.user
        }
    },
    methods: {
        //设置一个方法add控制data里的getuser自增
        add (){
            this.getuser++
        }
    },
    computed: {
    }
}
</script>

 

2.用辅助函数拿到store里的值，并用store里的方法操作

<template>
    <div>
        <button @click="contorlSetUserFn(2)">add</button>
        {{user}}
    </div>
</template>
<script>
import {mapState,mapActions} from 'vuex'
export default {
    data () {
        return {

        }
    },
    methods: {
        //使用辅助函数拿到方法
        ...mapActions(["contorlSetUser"]),
        contorlSetUserFn(a){
            this.contorlSetUser(a)
        }
    },
    computed: {
        //使用辅助函数拿到了user值
        ...mapState(["user"])
    }
}
</script>

 

3.我的store，配置数据持久化

Vue.use(Vuex);

const Store = new Vuex.Store({
    state:{
        user:1
    },
    mutations:{
        setUser(state,newuser = 1){
            state.user += newuser
        }
    },
    actions:{
        contorlSetUser({commit},newuser){
            //user对应mutations里面的一个方法名
            commit("setUser",newuser)
        }
    },
    // 默认保存到localStorage
    // plugins:[createPersistedState()],
    plugins:[createPersistedState({
        //  修改成sessionStorage    
        storage:window.sessionStorage
    })],
    
    modules:{}
})

export default Store