vuex的使用

开始

1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
2. 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

使用辅助函数（常见）

mapState辅助函数，mapGetters 辅助函数，mapMutations辅助函数
由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割（我的方法是，每一个大模块创建一个js文件）

具体的某个js文件

export default {
  namespaced: true,
  // 数据
  state: {
    // 模块的显示与隐藏
    appShellConfig: {
      isAsideShow: false,
      isHeaderShow: true,
      isFooterShow: true
    },
    header: [],
    aside: [],
    list:[1,2,3]
  },
  // 方法
  mutations: {
    // 设置侧边导航栏
    setAside(state, payload) {
      state.aside = payload
    },
    // 设置头部导航栏
    setHeader(state, payload) {
      state.header = payload
    },
    // 设置侧边栏高亮
    setAsidePath(state, payload) {
      state.asideActivePath = payload
    },
    setAppShellConfig(state, { isAsideShow = false, isHeaderShow = true, isFooterShow = true }) {
      state.appShellConfig = {
        isAsideShow,
        isHeaderShow,
        isFooterShow
      }
    },
    setList(state,payload) {
    	state.list = payload
    }
  },
  actions:{
  	setList({commit,state},{list}) {
  		commit('setList',list)
  	}
  }
}

index.js文件

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const storeModules = require.context('./modules', false, /\.js$/)
let obj = {}
// modules自动注册到store中
storeModules.keys().forEach(currentPath => {
  let str = currentPath.match(/\/(\S*)\.js/)[1]
  obj = {
    ...obj,
    [str]: storeModules(currentPath).default
  }
})
export default new Vuex.Store({
  modules: {
    ...obj
  }
})

组件中使用

<template>
  <div>
    element ui首页
  </div>
</template>
<script>
import {mapMutations, mapState, mapActions} from 'vuex'
export default {
// 获取vuex的数据在计算属性中获取
	computed:{
		...mapState('appShell',{appShellConfig:'appShellConfig'})
	}
	created(){
		let list = [1,2,3,4]
		this.setList({list})
	}
	methods:{
		...mapMutations('appShell',['setAppShellConfig'])
		...mapActions('appShell',['setList'])
		// 使用
		addclick(){
			this.setAppShellConfig({
				isAsideShow:false,
        		isHeaderShow:true,
        		isFooterShow:true
			})
		}
	}
}
</script>
<style lang="scss" scoped>

</style>

mution 与 actions的区别