目录
3.2.1.在src目录下创建目录store,在该文件夹中分别创建:
1.什么是Vuex?
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
2.什么情况下应该使用 Vuex?
如果不是大型单页应用,使用 Vuex 可能是繁琐冗余的。如果您的应用够简单,最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。
但是,如果需要构建一个中大型单页应用,就需要考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的选择。
站在系统架构的角度上来,vuex虽然能很好帮助我们管理状态, 但随之也带来更多的概念让我们花时间来消化,总而言之,根据项目的实际大小来决定是否需要引入Vuex
3.引入Vuex
从图中我们可以看到vuex包含了3个关键词
-
state
-
actions
-
mutations
3.1.安装
npm install vuex@next --save //npm
yarn add vuex@next --save //Yarn
3.2.基本配置
3.2.1.在src目录下创建目录store,在该文件夹中分别创建:
index.js(或 store.js),
search.js(search举例;这里就称为“仓库”,根据业务,必要时可以创建多个 )
3.2.2.index.js中
import Vue from 'vue'
//引入vuex
import Vuex from 'vuex';
//使用Vuex
Vue.use(Vuex);
//引入仓库
import search from './search.js';
//对外暴露Store类的实例
export default new Vuex.Store({
//实现Vuex仓库模块化开发存储数据
modules:{
search
}
})
3.2.3.search.js中
//state:数据仓库
const state = {
}
//actions:可以处理自己的业务逻辑,也可以异步
const actions = {
}
//mutations:修改state的唯一手段
const mutations = {
}
//getters: 用于简化仓库数据,相当于计算属性
const getters = {
}
//对外暴露
export default {
state,
mutations,
actions,
getters,
}
3.2.4.mian.js中
import store from './store'
new Vue({
el: '#app',
router,
store, // vuex store
components: { App },
template: '<App/>'
})
4.详细的使用Vuex流程
4.1.Dispatch(看上图)
<template>某组件</template>
<script>
export default {
name: 'Search',
data() {
return {
searchParams:{
}
}
},
methods:{
getData() {
this.$store.dispatch('getSearchList',this.searchParams)
//'getSearchList' => 方法名
//this.searchParams => 携带参数,非必须
},
},
</script>
<style></style>
4.2. Commit ——> Mutate (看图)
const state = {
//初始数据,这里就数组类型举例
searchList:[]
}
const actions = {
commit('GETSEARCHLIST',result.data)
//方法名 携带参数
//一般的,actions中发送ajax请求,result.data即ajax请求返回的数据
}
}
const mutations = {
//actions中的对应方法名
GETSEARCHLIST(state,searchList) {
state.searchList = searchList;
}
}
const getters = {
}
4.3.组件中获取数据
this.xxxx = this.$store.search.state.searchList //search是对应仓库的名字
或者在仓库中存储数据
this.$store.search.state.searchList = this.xxxx //search是对应仓库的名字