vuex状态管理工具

一、什么是vuex？

vuex在线文档

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

二、什么是"状态管理模式"？

在普通的vue实例中采用data存储数据，methods存储方法，在组件之间始终采用的是单向数据流传递。但是随着业务的增加，多层嵌套的组件将会非常繁琐，此时单向数据流就满足不了需求。因此，我们把组件的共享状态抽取出来，以一个全局单例模式管理。在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为！通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性，我们的代码将会变得更结构化且易维护。

三、基础知识

每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：

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

四、vuex实例

// 1-导入
import Vue from 'vue';
import Vuex from 'vuex';
// 2-注册
Vue.use(Vuex);
// 导入嵌套子模块
const demo = ()=>import("子模块地址");
// 3-创建数据存储对象
const store=new  Vuex.Store({
    // 数据存储对象
    state:{
    	name: "yy"
    },
     // 操作数据的同步方法
    mutations:{
    	// state: 系统自动注入, 接收到的就是state状态数据对象
       setName(state){
			console.log(state.name);
		}
    },
    // 请求数据接口的异步方法
    actions:{
    	// context:上下文对象, 系统自动注入, 包含commit(),dispatch()方法
       getName(context){
			// 是要调用异步接口获取数据
			context.commit("setName");
		}
    },
    // 类似于组件内部计算属性
    getters:{
       // state: 数据对象, 系统自动注入
    },
    // 嵌套子模块
    methods: {
    	// 进行挂载
    	demo
    }
});
export default store;

五、vuex辅助方法

• Sate数据映射：mapState()

import {mapState} from 'vuex';
// mapSate是在computed计算属性中映射
computed: {
  	// 使用对象展开运算符将此对象混入到外部对象中
  	// 启用子模块之前
  	...mapState([
  		// 映射 this.count 为 store.state.count
  		'count'
	]),
	// 启用子模块之后
	...mapState({count:state=>state.子模块名.count})
}

• Getters计算方法的映射：mapGetters()

import {mapGetters} from 'vuex';
export default{
   computed:{
   		// 启用子模块之前,brandCount是计算方法
       ...mapGetters(['brandCount']),
       // 启用子模块之后,brandCount是计算方法
       ...mapGetters('brand',['brandCount'])
   }	 	
}

• Mutations同步方法映射:mapMutations()

import {mapMutations} from 'vuex';
export default{
   methods:{
   		// 启用子模块之前，brandAdd是同步方法
       ...mapMutations(['brandAdd']),
       // 启用子模块之后brand是子模块名称，brandAdd是同步方法
       ...mapMutations('brand',['brandAdd'])
   }	 	
}

• Actions异步方法映射：mapActions()

import {mapActions} from 'vuex';
export default{
   methods:{
   		// 启用子模块之前，getBrandListAction异步方法
       ...mapActions(['getBrandListAction']),
       // 启用子模块之后brand是子模块名称，getBrandListAction是异步方法
       ...mapActions('brand',['getBrandListAction'])
   }	 	
}

六、在项目中使用element-ui组件库 element-ui在线文档

安装：npm i element-ui -S

全部导入

// 在main.js文件夹下配置
import Vue from 'vue';
// 1.导入核心包
import ElementUI from 'element-ui';
// 2-导入样式表
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
// 3-注册插件
Vue.use(ElementUI);

按需导入

1. 安装一个babel的插件babel-plugin-component；npm i babel-plugin-component -D
2. 打开babel配置文件.babelrc, 做如下修改

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": [
    "transform-vue-jsx", 
    "transform-runtime",
    // element-ui按需导入配置
   + [
   +   "component",
   +   {
   +     "libraryName": "element-ui",
   +     "styleLibraryName": "theme-chalk"
   +   }
   + ]
  ]
}

3. 重启开发服务器：npm run dev
4. 按需导入组件

import Vue from 'vue'
// 按需导入组件
import { Button,Divider,Calendar,Carousel,CarouselItem } from 'element-ui'
// 注册组件
Vue.use(Button);
Vue.use(Divider);
Vue.use(Calendar);
Vue.use(Carousel);
Vue.use(CarouselItem);