vue + vuex 实战开发使用
- 使用vuex 前老规矩首先下载安装 对应模块
npm install vuex --save
2.安装好对应模块后src文件夹下自动建立store 文件夹 ，文件夹下自动建立index.js 文件（其余的自己先建立一下之后用到的时候在进行说明）
image.png
大概目录如上所示
- index.js 内容大致如下（modules analysisStoreModule.js 接下来详细讲解）
import Vue from 'vue'
import Vuex from 'vuex'
import analysisStoreModule from './analysisStoreModule'
Vue.use(Vuex)
const modules = analysisStoreModule(require.context('./modules', true, /\.js$/)) // 对所有使用vuex 模块的文件夹 进行 解析遍历
export default new Vuex.Store({
state: {
},
mutations: {
},
actions: {
},
modules
})
analysisStoreModule.js的大致内容如下
// 自动解析模块，包含递归子模块
const analysisSubModule = (rq, moduleNames) => {
const moduleKeys = rq.keys()
const modules = moduleKeys.reduce((obj, path) => {
// 路径数组
const arr = path.split('/')
// 解析深度
const depth = moduleNames.length * 2
if (arr.length < 3 + depth) {
return obj
}
const parentName = arr[depth - 1]
const parentModule = moduleNames[moduleNames.length - 1]
// 避免将其他模块的子模块解析到当前递归模块
if (parentName !== parentModule) {
return obj
}
// 模块名称
const moduleName = arr[depth + 1]
// 字段名称，可以是以下中的某一个: state, actions, mutations, getters, modules
const fieldName = arr[depth + 2].replace(/\.js/, '')
// 若模块没有创建，创建它
if (!obj[moduleName]) {
obj[moduleName] = {
namespaced: true
}
}
// 当字段没有时，创建它
if (!obj[moduleName][fieldName]) {
obj[moduleName][fieldName] = {}
}
// 确保已有的对象数据不会丢失
const subObj = obj[moduleName][fieldName]
// 如果字段名称是modules，递归解析模块
obj[moduleName][fieldName] = {
...subObj,
...(fieldName === 'modules' ? analysisSubModule(rq, [...moduleNames, moduleName]) : rq(path).default)
}
return obj
}, {})
return modules
}
/**
* 解析store模块
* @param {[type]} rq [require.context返回的对象]
* @return {[type]} [无]
*/
export default (rq) => analysisSubModule(rq, [])
首先我们先在 modules 中建立两个文件夹 作为我们学习使用的两个模块（当然名称要与views中我们写的页面要一至），
image.png
每个文件夹里都有对应的四个js如下
image.png
对应的 views 中也有相同的两个文件夹如下
image.png
4.以home 文件夹为例
image.png
在 使用actionReduce 方法时传参
image.png
可以看到store中 modules下home内有四个对应的文件夹
首先在home 内引入对应的 state, getters,actions,mutations ( 通过 createNamespacedHelpers() )
然后介绍一下state, getters,actions,mutations 四个js 的内容以及功能
-
state 和 getters 映射到当前组件的 computed
Vuex就是提供一个仓库，仓库里面放了很多对象。其中state就是数据源存放地;
存储在 Vuex 中的数据和 Vue 实例中的data遵循相同的规则，例如状态对象必须是纯粹 (plain) 的。参考：Vue#data (opens new window)。
state.js
export default {
index: 0,
homeData: '我是home文件的数据'
}
Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
(Getter 接受 state 作为其第一个参数;Getter 也可以接受其他 getter 作为第二个参数;)
getters.js
export default {
jisuanAdd: state => {
const max = state.index
return max > 5?'计算出数值大于5':'计算出数值小于5'
},
jisuanReduce: ( state, getters) => {
const max = state.index + 2
return max > 5?'计算出数值大于5（+2）':'计算出数值小于5（+2）'
}
}
- actions和mutations映射到当前组件的methods
通俗的理解mutations,里面装着一些改变数据方法的集合，这是Veux设计很重要的一点，就是把处理数据逻辑方法全部放在mutations里面，使得数据和视图分离。
Vuex中store数据改变的唯一方法就是mutation！(Mutation 必须是同步函数)
mutations.js
export default {
add: (state, val) => {
console.log(val) // 用来记录传参问题
state.index--
},
reduce: ( state, val) => {
console.log(val) // 用来记录传参问题
state.index++
}
}
Action 类似于 mutation，不同在于：
Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。
背景：在mutation中我们讲到，mutation中是存放处理数据的方法的集合，我们使用的时候需要commit。但是commit是同步函数，而且只能是同步执行。那我们想异步操作怎么办？
作用：在actions中提交mutation，并且可以包含任何的异步操作。actions可以理解为通过将mutations里面处里数据的方法变成可异步的处理数据的方法，简单的说就是异步操作数据（但是还是通过mutation来操作，因为只有它能操作）
actions.js
export default {
actionAdd: (context, val) => {
console.log(val) // 用来记录传参问题
context.commit('add', val) // add 时 mutations 中的方法
},
actionReduce: ( {commit}, val) => { // 参数解构 方法来简化代码
console.log(val) // 用来记录传参问题
commit('reduce', val)
}
}
在运用过程中多添加打印 用来更好的理解vuex
(参考他人 + 官网) 自己实际在项目中操作的结果（-_-```）
(重要通知 在“例如在store 下 home 下增加子模块时 一定要在 home 文件夹下建立 modules，子模块添加在modules中 在文件中引用时 createNamespacedHelpers(home/ 子模块名称)”)
