文章目录
更多关于Vue.js的系列文章请点击:Vue.js开发实践(0)-目录页
一、入门Vuex
1.1、什么是Vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
简单地说,Vuex为Vue.js项目提供了统一的方法管理。
1.2、Vuex的安装
在Vue.js的webpack项目中,使用npm或者cnpm就可以安装并配置Vuex:
cnpm install vuex --save
,安装完成后,在相应webpack项目的package.json文件夹里可以看到这一行配置即代表项目以及导入了Vuex的依赖:
"dependencies": {
"vuex": "^3.0.1",
....
}
二、Vuex的常用术语解释
- State:集中初始化所有变量和数据的地方
- Getters:外部获得数据的唯一点
- Actions:配置方法映射到Mutations中
- Mutations:唯一改变数据的地方,当外部触发Actions的commit时会响应其内部的相应函数。
三、Vuex的常用项目结构
Vuex的官方对Vuex的项目结构做出了一定的规范要求,即:
- 整个项目中,只能有一个状态管理量state
- 整个项目中,所有的方法映射都在actions中配置并commit给mutations
- 整个项目中,所有改变state的操作都在mutations中完成
一般来说,可以这样建立项目结构:
├── index.html
├── main.js
├── api
│ └── ... # 抽取出API请求,可有可无
├── components
│ ├── App.vue
│ └── ...
└── store
├── index.js # 导出modules给外部
└── modules
├── cart.js # 购物车模块
└── products.js # 产品模块
如果项目需要管理的方法和数据很多,Vuex官方推荐的项目结构为:
├── index.html
├── main.js
├── api
│ └── ... # 抽取出API请求
├── components
│ ├── App.vue
│ └── ...
└── store
├── index.js # 我们组装模块并导出 store 的地方
├── actions.js # 根级别的 action
├── mutations.js # 根级别的 mutation
└── modules
├── cart.js # 购物车模块
└── products.js # 产品模块
四、vuex-demo请求流程
4.1、需求
点击增加数字或者减少数字,页面的数据动态发生变化。
4.2、Vuex的请求流程
Vuex的请求流程如图,不过现在可能不太明白,我们稍后通过具体的例子去分析这个流程:
4.3、Vuex的具体使用
首先使用vue-cli建立webpack项目,并且使用npm导入vuex,这里不再赘述。这是建立的项目结构:
- App.vue
<template>
<div id="app">
<button @click="addNumber()">点我增加数字!</button>
<button @click="decNumber()">点我减少数字!</button>
The number is:{{number}}
</div>
</template>
<script>
//导入getter和actions
import {mapGetters,mapActions} from 'vuex'
export default {
data(){
return{}
},
//mapGetters是vuex的核心组件,它在计算属性中使用,
//用于标记需要改变的量,最后会从getters中获取
computed:mapGetters([
'number'
]),
//mapActions用于定义actions中映射的方法名
methods:mapActions([
'addNumber',
'decNumber'
])
}
</script>
<style>
#app {
margin:auto;
}
</style>
- demo.js
//定义状态量
const state = {
originNumber: 0
}
//定义getters
const getters = {
number:state=>{
return state.originNumber
}
}
//定义actions映射
const actions = {
addNumber({commit}){
commit('add')
},
decNumber({commit}){
commit('dec')
}
}
//真正用于修改数据的方法
const mutations = {
add(state){
//alert(state.originNumber)
//修改数据
state.originNumber++
},
dec(state){
state.originNumber--
}
}
//导出所有配置
export default {
state,
getters,
actions,
mutations
};
- store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
import demo from './modules/demo';
Vue.use(Vuex);
export default new Vuex.Store({
modules:{
demo
}
})
- main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import app from './App'
import store from './store'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#home',
store,
components: { app }
})
以上四个部分就可以构成一个完整的Vuex实例了,接下来说说这几个文件中的一些关键配置的作用:
- App.vue
这是发送Vuex请求的组件,通过@click="funcName()"去调用实例中的一个方法,这个方法通过mapActions去映射给Actions。
methods: mapActions([‘funcName’])
- demo.js
这是Vuex的核心配置文件,里面配置了state、getters、actions和mutations并导出所有配置,其中state定义了所有初始化数据,getters定义了获取数据的唯一点,而actions则由App.vue中的mapActions进行了映射,并且传递一个commit函数给mutations中的方法realFunc,而realFunc才是真正改变state状态的地方:
const actions = {
funcName({commit}){commit('realFunc')}
}
const mutatinos = {
realFunc(state){//state.xxx}
}
- index.js
位于store下的index.js的作用是获取modules下所有的Vuex配置文件,在本例中只有一个即demo.js;获取到后,通过导出Vuex.Store注册配置文件,即可在main.js中直接获取store文件夹并且在实例中挂载store了:
import Vue from 'vue';
import Vuex from 'vuex';
import demo from './modules/demo';
Vue.use(Vuex);
//导出Vuex.Store并注册Vuex核心配置文件
export default new Vuex.Store({
modules:{
demo
}
})
- main.js
main.js的作用就很明显了,它获取整个store文件夹并且挂载到需要使用Vuex的Vue实例上。
import Vue from 'vue'
import app from './App'
import store from './store'
new Vue({
el: '#home',
store,
components: { app }
})
这就是Vuex的一个请求流程了,结合官方提供的流程图,我们可以发现,我们的Demo完全符合这个请求流程:
App.vue通过mapActions发送一个方法调用请求给demo.js核心配置文件中的actions,在actions中通过调用commit函数去触发位于mutations中的真正方法realFunc(state),之后再通过这个方法改变state状态,并且渲染了实例。
以下是本例的文件请求图: