VueX的简单使用

Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。其实最简单理解为，在我们写Vue组件中，一个页面多个组件之间想要通信数据，那你可以使用Vuex
* Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式
* Vuex状态管理 === 管理组件数据流动 === 全局数据管理
* Vue的全局数据池，在这里它存放着大量的复用或者公有的数据，然后可以分发给组件
* Vue双向数据绑定的MV框架，数据驱动(区别节点驱动)，模块化和组件化，所以管理各组件和模块之间数据的流向至关重要
* Vuex是一个前端非持久化的数据库中心，Vuex其实是Vue的重要选配，一般小型不怎么用，大型项目运用比较多，所以页面刷新，Vuex数据池会重置

路由-》管理的是组件流动Vuex-》管理的是数据流动没有Vuex之前，组件数据来源
* ajax请求后端
* 组件自身定义默认数据
* 继承其他组件的数据
* (从vuex拿)

安装
安装必须的依赖

yarn add vuex --save
npm install vuex --save

使用在一个模块化的打包系统中，您必须显式地通过Vue.use()来安装
Vuex：

 import Vue from 'vue'			//var Vue = require('vue')
 import Vuex from 'vuex'		//var Vuex = require('vuex')

Vue.use(Vuex)五大概念
* State 池 (数据源)
* Getter 查 (获取数据源的数据)
* Mutation 改 (真正修改的动作)
* Action 触发修改行为(多配合异步使用)
* Module 可以拥有多个数据源(数据池)

导出store
每一个 Vuex 应用的核心就是 store（仓库）。store 基本上就是一个容器，它包含着你的应用中大部分的状态(state)。Vuex 和单纯的全局对象有以下两点不同：
1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
2. 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交(commit) mutations。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

// 实例化Vuex，创建一个仓库const store = new Vuex.Store({
	// 状态// 该库存数据的地方
	state: {// 状态值count: 0,author: 'lemon'},
	// 修改数据的方法
	mutations: {// 修改数据的第一个方法increment(state) {state.count++}}})
	// 暴露store仓库到`main.js`的根容器里面export default store

挂载仓库

	挂载仓库
	// 引入仓库
	import store from './configs/store.js'
	// Root容器
	let vm = new Vue({el: "#lemon",
	// 挂载路由
	router,
	//挂载仓库
	store,
	// 把App组件挂载到#app的这个节点上
	render: h => h('router-view'),})

获取数据源的数据
第一种方法

beforeCreate() {
	// 来自于vuex仓库
	console.log(this.$store.state.author)
	// 来自于组件自定义
	console.log(this.title
)}

第二种方法
先定义store中的getters

getters: {
	// 获取author的方法
	getAuthor(state) {
		return state.author + ' Yeah'
	},getCount(state) {
	return state.count
}}

通过属性访问
Getter 会暴露为store.getters对象，你可以以属性的形式访问这些值

computed: {
// 从仓库里面去取值
	title(){
		return this.$store.getters.getAuthor
	}
}

修改数据的方法
先定义store中的mumat

// 修改数据的方法
mutations: {
	// 修改数据的第一个方法
	editCount(state) {
		state.count++
	},// 修改仓库中state中的authoredit
	Author(state, data) {
		state.author = data
	}
}

然后在组件触发commit事件

methods: {
	editAuthor() {
		console.log(this.$store);
		// 触发store里面的mutations，把store里面的author改为laotian
		this.$store.commit('editAuthor','laotian')
	}
}

组件间数据的流动组件

const store = new Vuex.Store({
	state: {
		getSearchName: 'hello vuex, I am wscats',
	},
	//接受组件commit传过来的数据并保存到state中,this.$store.commit('changeSearchName', this.searchName);
	mutations: {
		changeSearchName: function(state, a) {
			state.searchName = a;
		},
	},
	//可以从组件调用此方法获取值，一般配合计算属性动态获取值
	//(1)return this.$store.state.searchName
	//(2)return this.$store.getters.getSearchName
	getters: {
		getSearchName: function(state) {
			return state.searchName;
		}
	}
})

视图中获取getSearchName值然后触发**search()**函数，看下面的this.$store.commit(‘changeSearchName’, this.getSearchName);函数

<input type="search" @keyup="search()" v-model="getSearchName" placeholder="搜索" />

通过在根实例中注册store选项，该 store 实例会注入到根组件下的所有子组件中，且子组件能通过 this.$store访问到

const app = new Vue({
	store
}).$mount('#app')

往state设置值
直接设置state的值

this.$store.state.title = “wscats”

直接触发mutations
通过commit方法提交直接触发mutations

methods: {
	search() {
		this.$store.commit('changeSearchName', this.getSearchName);
	}
},

触发actions
定义action，再用commit触发mutations，建议如果有异步的操作的话，可以配合action触发数据变动，但是如果是同步的话，可以在组件直接commit触发mutations

actions: {
	setChange(context, data) {
		context.commit('setCount', data)context.commit('settitle', data
	)},
	setNews(context, data) {
		context.commit('setNews'
	)}
}

然后在组件中用dispatch触发action的改变

methods: {
	loadMore() {
		this.$store.dispatch("setNews")
	}
}

从state获取值
直接获取state的值
不推荐这种做法

computed: {searchName() {return this.$store.state.searchName;//或者return this.$store.state.searchName}},

通过getters方法获取
先在store中定义getters

getters: {
	getTitle(state) {
		//处理数据
		return state.title + "ed"
	}
}

然后通过getters方法配合computed计算属性动态获取

computed: {
	title() {
		//直接获取状态//
		this.$store.state.title
		//通过getters获取状态
		return this.$store.getters.getTitle
	}
}

mapState
我们可以使用mapState来获取vuex里面的state的值，这样比getters方便很多

import { mapActions, mapState } from "vuex";
computed: {
	// 从仓库里面去取值title() {
		return this.$store.getters.getAuthor;
	},...mapState({
		author: state => state.author,
	})
}