Vue-store

场景

有些时候需要在当前页面去修改其他页面的数据,如果使用 localStorage那需要页面重新加载,因为localStorage是数据不是在 Vue 项目本身的,而是存放在浏览器中的,这需要页面重新加载,样式才会重新加载数据并渲染.这在用户体验上是很不友好的事,这个时候就需要使用 store.

store

store 你可以理解为一个全局变量池,其中可以存放变量或者方法.
首先需要在 store里注册这个变量和改变它的方法

// store.modules
const app = {
  state: {
    isTopMenu: true,
    distributorNo: 0
  },
  mutations: {
    SWITCH_MENU: (state, isTopMenu) => {
      state.isTopMenu = isTopMenu
    },
    CHANGE_DISTRIBUTORNO: (state, distributorNo) => {
      state.distributorNo = distributorNo
    }
  },
  actions: {
    SwitchMenu({ commit }, isTopMenu) {
      commit('SWITCH_MENU', isTopMenu)
    },
    ChangeDistributorNo({ commit }, distributorNo) {
      commit('CHANGE_DISTRIBUTORNO', distributorNo)
    }
  }
}
export default app

// 在store->index.js 里初始化对象
import app from './modules/app'
const store = new Vuex.Store({
  modules: {
    app
  },
  getters
})
export default store

这样我们就有了 state.distributorNo, ChangeDistributorNo(), CHANGE_DISTRIBUTORNO

store.dispatch 调用

1	store.dispatch('ChangeDistributorNo', this.$route.query.distributorNo)

在需要改变state.distributorNo时这样调用,第一个参数是方法名,第二个参数是方法对应的参数.这样就改变了 store 里的 distributorNo

store.dispatch和store.commit的区别

dispatch：含有异步操作，例如向后台提交数据，写法： this.$store.dispatch(‘mutations方法名’,值)

commit：同步操作，写法：this.$store.commit(‘mutations方法名’,值)

mapGetters

mapGetters是 Vue里自带,它用于引入 store.getters 里注册的(全局)变量

const getters = {
  isTopMenu: state => state.app.isTopMenu,
  distributorNo: state => state.app.distributorNo,
}
export default getters

这样在其他页面引入 mapGetters,就会获取这个对象
如果使用这样的代码引入,就会获得对应的变量

...mapGetters([
  'isTopMenu',
  'distributorNo'
])
// [state.app.isTopMenu, state.app.distributorNo]

watch 事件

在需要改变的样式页面里监听数据
监听数据需要先向computed注册,而不是向 data注册

import { mapGetters } from 'vuex'
computed: {
    ...mapGetters([
      'isTopMenu',
      'distributorNo'
    ])
  },
  watch: {
    distributorNo: function(val) {
      localStorage.setItem('distributorNo', val)
      this.distributorList.forEach((item) => {
        if (item.distributorNo === val) {
          localStorage.setItem('distributorName', item.name)
          this.chooseDistributor = item.name
        }
      })
      delete this.$route.query.distributorNo
    }
  },

这样当 distributorNo 变量改变时,就会触发事件,执行方法,这里的 val 就是改变后的新数值,
这样该页面的数据就变了,Vue 就会重新渲染该页面,不会重新加载整个页面,用户体验好的多

黄威龙的笔记

Vue-store 笔记