vue 监控vuex中state getters store

只能是一个参数

vue 监控vuex中state getters store_第1张图片

 

一、

添加:selectCityId 

1、store 中

vue 监控vuex中state getters store_第2张图片


const state = {
    politicsTwoNav: '台北市',
    selectCityId:'0'

}

const mutations = {
    POLITICS_TWO_NAV: (state, politicsTwoNav) => {
        state.politicsTwoNav = politicsTwoNav
    },
    SELECT_CITY: (state, selectCityId) => {
        console.log(selectCityId,")00000")
        state.selectCityId = selectCityId
    },
}

const actions = {
    // get user info
    getInfo({ commit, state }) {
        return new Promise((resolve, reject) => {
            getInfo(state.token).then(response => {
                const { data } = response

                if (!data) {
                    reject('Verification failed, please Login again.')
                }

                const { roles, name, avatar, introduction } = data

                // roles must be a non-empty array
                if (!roles || roles.length <= 0) {
                    reject('getInfo: roles must be a non-null array!')
                }

                // commit('SET_ROLES', roles)
                // commit('SET_NAME', name)
                // commit('SET_AVATAR', avatar)
                // commit('SET_INTRODUCTION', introduction)
                resolve(data)
            }).catch(error => {
                reject(error)
            })
        })
    }
}

export default {
    namespaced: true,
    state,
    mutations,
    actions
}

2、getters.js 中

const getters = {
  politicsTwoNav: state => state.politics.politicsTwoNav,
  selectCityId: state => state.politics.selectCityId,
}
export default getters

3、页面可以直接监控 

vue 监控vuex中state getters store_第3张图片

watch: {
    "$store.state.politics.selectCityId"(newV) {
      this.getData(newV);
    },
  },

4、存

vue 监控vuex中state getters store_第4张图片

vue 监控vuex中state getters store_第5张图片

import store from "../store";

store.commit("politics/SELECT_CITY", type);

二、

1、页面引用不需要存数据到vuex中

vue 监控vuex中state getters store_第6张图片




 2、页面需要存数据到vuex中

vue 监控vuex中state getters store_第7张图片

 vue 监控vuex中state getters store_第8张图片






你可能感兴趣的:(vue,vuex,vue.js,javascript,前端)