vuex状态管理

Posted 2020-11-25 tommymarc

状态管理bus

//通过在lib 创建bus.js,作为一个bus状态管理模块

import Vue from ‘vue‘

const Bus = new Vue()
export default Bus

//a.vue

<template>
    <div>
        <button @click="handleClick">按我</button>
    </div>
</template>
<script>
export default {
    methods:{
        handleClick(){
            this.$bus.$emit(‘on-click‘,‘hello‘)
        }
    },
    mounted(){
        console.log(this.$bus);    
    }
}
</script>

//b.vue

<template>
    <div class="tel">
        {{message}}
    </div>
</template>
<script>
export default {
    data(){
        return {
            message:‘‘
        }
    },
    mounted(){
        this.$bus.$on(‘on-click‘,mes=>{
            this.message = mes
        })
    }
}
</script>

 

通过store 集中管理

• actions：异步操作处理 接口数据
• mutations：修改值
• state： 修改后值
• modules：存储特定模块的参数

入口  /index.js

import Vue from ‘vue‘
import Vuex from ‘vuex‘

import state from ‘./state‘
import mutations from ‘./mutations‘
import actions from ‘./actions‘
import getters from ‘./getters‘

import user from ‘./module/user‘

Vue.use(Vuex)

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

 

actions

import { getAppName } from ‘@/api/app.js‘

const actions = {
    /* updateAppName({commit}){
        //方法  
        // const commit = paramsObj.commit
        getAppName().then(res=>{// 模拟异步操作
            const { code, info:{appName}} = res 
            commit(‘SET_APP_NAME‘,appName)
            console.log(res);
            // commit(‘SET_APP_NAME‘,res.info.appName)
        }).catch(err=>{
            console.log(err);
            
        })  
    } */

    async updateAppName({commit}){
        try{
            const {info:{appName}} = await getAppName();
            commit(‘SET_APP_NAME‘,appName)
        }
        catch(err){
            console.log(err);
            
        }
    }
}
export default actions

 

mutations

import vue from ‘vue‘
const mutations = {
    SET_APP_NAME(state,params){ // params 载赫，参数
        state.appName = params
    },
    SET_APP_VERSION(state){
        vue.set(state,‘appVersion‘,‘V10.0‘)
    }
}
export default mutations

state

const state ={
    appName:‘admin‘
}
export default state

modules / user

在store内，可创建储存独立模块参数user，放至modules文件中

const state ={
    userName:‘tommy‘
}
const getters ={
    firstLetter: (state) =>{
        return state.userName.substr(0,1)
    }
}
const mutations = {
    SET_USER_NAME(state,params){
        state.userName =params
    }
}
const actions = {
    updateUserName({commit,state,rootState,dispatch}){ //提交mutations  state 指代当前实例  rootstate 根state
        // rootState.appName
        //dispatch(‘xxx‘,‘‘)
    },
    /* 
    xxx(){
        
    }
    */
}
export default {
    namespaced:true,  //只限于当前模块
    getters,
    state ,
    mutations,
    actions
}

 

页面组件模块 store.vue

<template>
    <div>
        <!-- <a-input @input="inputValue" :value="inputValue"/> -->
        <a-input @input="handleInput"/>
        <!-- <a-input v-model="inputValue"/> -->
        <p>{{inputValue}} inputValueLastLetter is {{inputValueLastLetter}}</p>
        <p>{{inputValue}}</p>
        <p>userName:{{userName}}</p>
        <p>appName:{{appName}}</p>
        <p>appNameWithVersion:{{appNameWithVersion}}</p>
        <p>firstLetter:{{firstLetter}}</p>
        <button @click="handleChangeAppName">修改appName</button>
        <!-- <a-show :content="inputValue"/> -->
        <p>{{appVersion}}</p>
        <button @click="changeUserName">修改用户名</button>
        <button @click="asyncChangeAppName">异步修改appName</button>
    </div>
</template>
<script>
import AInput from ‘../components/AInput.vue‘
import AShow from ‘../components/AShow.vue‘
import { mapState ,mapGetters ,mapMutations ,mapActions} from ‘vuex‘
export default {
    data(){
        return {
            inputValue:‘‘
        }
    },
    components:{
        AInput,
        AShow
    },
    methods:{
        handleInput(val){
            this.inputValue = val
        },
        /* handleChangeAppName(){
            this.$store.commit(‘SET_APP_NAME‘,this.inputValue),
            this.$store.commit(‘SET_APP_VERSION‘)
        } */
        ...mapMutations(‘user‘,[
            
            ‘SET_USER_NAME‘
        ]),
        ...mapMutations([
            ‘SET_APP_NAME‘,
        ]),
        handleChangeAppName(){
            this.SET_APP_NAME(this.inputValue);
        },
        changeUserName(){
            this.SET_USER_NAME(‘vue-version‘)
        },

        ...mapActions([
            ‘updateAppName‘
        ]),
        asyncChangeAppName(){
            this.updateAppName()
            // this.$store.dispatch(‘updateAppName‘,‘123‘)
        }

    },
    computed:{
        /* ...mapState({
            userName:state=>state.user.userName,
            appName:state=>state.appName
        }), */
        /* ...mapState(‘user‘,{
            userName:state => state.userName
        }), */

        appName(){
            return this.$store.state.appName
        },
        /* appName:{
            set:function(newValue){
                this.inputValue = newValue +‘....set‘
            },
            get:function(){
                return this.inputValue +‘...get‘
            }
        } */

        userName(){
            return this.$store.state.user.userName
        },

        ...mapGetters(‘user‘,[
            ‘firstLetter‘
        ]),
        /* firstLetter(){
            return this.userName.substr(0,1)
        }, */
        
        ...mapGetters([
            ‘appNameWithVersion‘,
        ]),
        ...mapState({
            appVersion:state=>state.appVersion
        }),
        /* appNameWithVersion(){
            return this.$store.getters.appNameWithVersion
        }, */

        inputValueLastLetter(){
            return this.inputValue.substr(-1,1)
        }
    }
}
</script>

 

初期定义store内的state，视图会渲染；后期定义响应，store内的state，需定义set、get才会渲染

因此需要在mutations中set、get所需修改的state