Vue构建思路整理之二--vuex的使用

官网对vuex的介绍是:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

首先是vuex的整体目录

其中,state是状态,mutations是对应的修改状态的方法,mutations-types是一次转义,getters是获取当前状态,actions是异步处理操作,入口文件是index

其中,state代码

const state = {
  agent: '11'
}
export default state

mutations代码

import * as types from './mutation-types'
const mutations = {
  [types.SET_RECOMMEND_LOCK] (state, lock) {
    state.recommend.islock = lock
  }
}
export default mutations

mutation-types代码

export const SET_AGENT_LIST = 'SET_AGENT_LIST'
index代码
import Vue from 'vue'
import Vuex from 'vuex'
import * as actions from './actions'
import * as getters from './getters'
import state from './state'
import mutations from './mutations'
import createLogger from 'vuex/dist/logger'
Vue.use(Vuex)
const debug = process.env.NODE_ENV !== 'production'
export default new Vuex.Store({
  actions,
  getters,
  state,
  mutations,
  strict: debug,
  plugins: debug ? [createLogger()] : []
})
getters代码

export const single = state => state.single

完成之后,在main.js引入vuex

import './config/rem'
import Vue from 'vue'
import App from './App'
import router from './router'
// 引入vuex
import store from './store/index'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  template: '',
  components: { App }
})

在页面中的使用

首先引入vuex,用vue的语法糖可以更简单点

import {mapState, mapMutations} from 'vuex'
如果引用state,则在computed里面加入mapState
computed: {
      ...mapState([
        'agent',
        'receiver',
        'recommend'
      ])
},

如果调用方法,则在methods加入mapMutations

...mapMutations({
   setReceiveName: 'SET_RECEIVE_NAME'
})

随机浏览