vue学记笔记(六) Vuex

Vuex

• 可以理解为公共仓库，它只要一刷新数据就清空。负责组件之间传值。父子，兄弟都可以

Vuex 分成几个部分

• state (存放公共数据)

• getters (对 state 数据二次封装，防止污染 state)

• mutations (里面都是方法，它的作用就是修改 state 里面的数据)

• actions (可以理解为 mutations 里面的一个合集,它能执行很多个 mutations)

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
  //要设置的全局访问的state对象
  showFooter: true,
  changableNum: 0
  //要设置的初始属性值
}
const getters = {
  //实时监听state值的变化(最新状态)
  isShow(state) {
    //承载变化的showFooter的值
    return state.showFooter
  },
  getChangedNum() {
    //承载变化的changebleNum的值
    return state.changableNum
  }
}
const mutations = {
  show(state) {
    //自定义改变state初始值的方法，这里面的参数除了state之外还可以再传额外的参数(变量或对象);
    state.showFooter = true
  },
  hide(state) {
    //同上
    state.showFooter = false
  },
  newNum(state, sum) {
    //同上，这里面的参数除了state之外还传了需要增加的值sum
    state.changableNum += sum
  }
}
const actions = {
  hideFooter(context) {
    //自定义触发mutations里函数的方法，context与store 实例具有相同方法和属性
    context.commit('hide')
  },
  showFooter(context) {
    //同上注释
    context.commit('show')
  },
  getNewNum(context, num) {
    //同上注释，num为要变化的形参
    context.commit('newNum', num)
  }
}
const store = new Vuex.Store({
  state,
  getters,
  mutations,
  actions
})
export default store

• 使用的时候 actions 第一个参数和 mutations 的第一个参数都可以不传

• mapState,mapMutations 是 Vue 提供的语法糖可以直接使用

<script>
  import { mapState, mapMutations } from 'vuex'
  export default {
    computed: {
      ...mapState({
        singerId: 'singer' //改名
      })
    },
    data() {
      return {
        message: '汇总',
        showflag2: false
      }
    },
    methods: {
      ...mapMutations({
        setsinger: 'setsinger' //改名
      }),
      // 点击方法
      gotourl(id) {
        this.setsinger(id)
      }
    }
  }
</script>

Vuex 也可以分着写，然后在汇总

• 单独的第一个 store 文件

export default {
  state: {
    orderData: ''
  },
  mutations: {
    updateOrder(state: any, orderData: any) {
      state.orderData = orderData
    }
  }
}

• 单独的第二个 store 文件

export default {
  state: {
    modalHow: ''
  },
  mutations: {
    updateModalClose(state: any, modalClose: any) {
      state.modalClose = modalClose
    }
  }
}

• 汇总

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import footer from './modules/kiosk_footer' // 引入第一个store对象
import cart from './modules/kiosk_cart' //引入第二个store对象
export default new Vuex.Store({
  modules: {
    footer,
    cart
  }
})