基于vue-cli开发
1.安装并使用vuex，这里安装的是3以上的版本，4的配置项不同
2.配置 /store/index.js 总仓库
3.配置模块独立仓库 也就是在store下新建各个组件自己的仓库配置，
比如在/store/home/index.js,然后通过总仓库modules引入总仓库管理
4.在main.js中注册Store.让组件实例上带有$store属性
至此vuex 模块化开发配置完成
在vuex中，store是可以被分割成一个一个的模块(module)的。分割出的模块拥有自己独立的state、mutation、action、getter。同样，分割出的模块中同样可以进一步的分割，称为嵌套子模块。最简单的模块分割如下：
由于模块的存在，便有了局部状态（尽在当前模块内部使用的状态）和根节点状态的区别出现；
需要注意的是，在action中，context.state能获取局部状态、context.rootState能获取根节点状态：
而在getter中，根节点状态会是第三个传入的参数：
默认情况下，模块内部的action、mutation和getter是注册在全局命名空间的。添加了namespaced: true后，该模块将会变为带命名空间的模块
在带命名空间的模块内访问全局内容（Global Assets）
rootState和rootGetters会作为第三和第四个参数传入getter中，相应的对于action，会作为context的属性传入：
带命名空间的绑定函数
使用mapState、mapActions等辅助函数时，可以参考下面的写法：
另一种方式是使用createNamespacedHelpers 这个辅助函数，它会返回基于某个命名空间的辅助函数
建议参考以下结构：
1.VUE-X辅助函数用法：
App.vue内容：
<template>
<div id="app">
<h1>{{num}}</h1>
<button @click="addNumber">增加</button>|
<button @click="delNumber">减少</button>|
<button @click="ajaxfn">异步加</button>|
</div>
</template>
<script>
/* 导出vuex中的 mapState 方法*/
import { mapState,mapGetters, mapMutations,mapActions} from 'vuex'
export default {
name:"App",
computed:{
/* */
...mapState(['num']),
...mapGetters(['getDaZhuan','getBenKe'])
},
methods: {
/* 利用mapMutations方法使用拓展运算符把Mutations的方法解构在methods中 */
/* 在this中也可以找到对应解构出来的方法 */
/* ...mapMutations(['ADDNUM','DELNUM']), */
/* 如果Mutations中的方法和methods中同名了,可以采用对象形式修改 */
...mapMutations({
addfn:'ADDNUM',
delfn:'DELNUM'
}),
/* 类似于下面 */
/* ADDNUM:function(){...}
DELNUM:function(){...} */
addNumber(){
/* this.$store.commit('ADDNUM',2) */
/* this.ADDNUM(2) */
this.addfn(2)
},
delNumber(){
/* this.$store.commit('DELNUM',2) */
/* this.DELNUM(2) */
this.delfn(2)
},
ADDNUM(){
console.log(2)
},
/* 利用mapActions方法使用拓展运算符把Actions的方法解构在methods中 */
/* 在this中也可以找到对应解构出来的方法 */
/* ...mapActions(['addajax']), */
/* 如果Actions中的方法和methods中同名了,可以采用对象形式修改 */
...mapActions({
addajax2:'addajax'
}),
ajaxfn(){
this.addajax(5)
},
addajax(){
this.addajax2(5)
}
},
}
</script>
<style>
</style>
store下index.js内容：
/* import { set } from 'core-js/core/dict'*/
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
/* Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。
它采用集中式存储管理应用的所有组件的状态，
并以相应的规则保证状态以一种可预测的方式发生变化。 */
/* 如果需要构建一个中单行单页应用,灰考虑如何更好的在组件外部管理状态,
Vuex将会成为自然而然的选择 */
/* 导出一个Vuex实例化对象 */
export default new Vuex.Store({
/* state是用来存储组件中的数据的 */
state: {
msg: '我是组件共享的数据',
num: 0,
list: [{
"title": "某xxxx去了学校1",
"dec": "xxxxxxx学习了vue学习了java",
"xueli": "大专"
},
{
"title": "某xxxx去了学校2",
"dec": "xxxxxxx学习了vue学习了javaScript",
"xueli": "大专"
},
{
"title": "某xxxx去了学校3",
"dec": "xxxxxxx学习了vue学习了云计算",
"xueli": "大专"
},
{
"title": "某xxxx去了学校4",
"dec": "xxxxxxx学习了vue学习了前端",
"xueli": "本科"
},
{
"title": "某xxxx去了学校5",
"dec": "xxxxxxx学习了vue学习了后端",
"xueli": "本科"
},
{
"title": "某xxxx去了学校6",
"dec": "xxxxxxx学习了vue学习了大数据",
"xueli": "本科"
}
]
},
/* getters计算组件中的数据的,可以对数据进行二次加工类似于computer功能 */
/* 类似于计算属性 */
getters: {
/* 计算大专学历的数据 */
getDaZhuan: function (state) {
return state.list.filter(r =>r.xueli == '大专')
},
/* 计算本科学历的数据 */
getBenKe: function (state) {
return state.list.filter(r =>r.xueli == '本科')
},
/* 说明也具有缓存功能 如果state中的数据得到了改变
那么getters中的属性也会发生改变,如果state的值没有发生任何变化,那么getters
中的属性的值就不会发生改变*/
getRandom:function(state){
return state.num +'--'+ Math.random()
}
},
/* 在mutations中修改state中的值(修改state中的值要想留下记录必须用mutations修改) */
mutations: {
/* 在mutations里面写异步就会造成数据混乱的问题 */
/* mutations 的方法最好大写,为了和actions方法做区分 */
/* mutations 通过payload来获取 */
ADDNUM: function (state, payload) {
console.log('ADDNUM', state)
/* 模拟后台获取数组的异步场景 */
/* setTimeout(()=>{
state.num+=payload
},500) */
/* state.num++ */
state.num += payload
},
DELNUM: function (state, payload) {
console.log('DELDNUM', state)
/* state.num-- */
state.num -= payload
},
},
/* actions是用来调后台接口的并commit提交一个mutations */
actions: {
/* actions里面的方法小写为了区分mutations里面的方法 */
/* 异步请求要放 actions 里面去写 不要放组件写*/
addajax: function ({
commit
}, data) {
setTimeout(() =>{
/* 使用解构出来的commit方法来提交一个mutations方法ADDNUM来修改state中的值 */
commit('ADDNUM', data)
}, 500)
},
delajax: function ({
commit
}, data) {
setTimeout(() =>{
/* 使用解构出来的commit方法来提交一个mutations方法ADDNUM来修改state中的值 */
commit('DELNUM', data)
}, 500)
},
},
/* 可以使用modules把vuex分模块 */
modules: {}
})
2.分模块使用vuex：
app.vue内容：
<template>
<div id="app">
<h1>{{$store.state.modA.modaStr}}</h1>
<h1>{{$store.state.modB.modbStr}}</h1>
<h1>{{$store.getters['modA/strGetter']}}</h1>
<button @click="changeStr">修改modaStr的值</button>
<button @click="waitchange">异步修改modaStr的值</button>
</div>
</template>
<script>
export default {
name:"App",
created(){
console.log(this)
},
methods:{
changeStr(){
this.$store.commit('modA/CHANGESTR','坚持学VUE啊')
},
waitchange(){
this.$store.dispatch('modA/waitfnStr','坚持学前端啊')
}
}
}
</script>
<style>
</style>
store新建modules文件创建ModA.js文件：
/* 模块的局部状态 */
/* 箭头函数如果想返回对象需要使用()包一下不能直接返回{} */
const state = ()=>({
modaStr:'我是模块A的数据'
})
/* getters计算组件中的数据的,可以对数据进行二次加工类似于computer功能 */
/* 类似于计算属性 */
const getters= {
strGetter:function(state){
console.log(state)
return state.modaStr + 'getter'
}
}
/* 在mutations中修改state中的值(修改state中的值要想留下记录必须用mutations修改) */
const mutations= {
CHANGESTR(state,payload){
state.modaStr = payload
}
}
/* actions是用来调后台接口的并commit提交一个mutations */
const actions= {
waitfnStr({commit},data){
setTimeout(()=>{
commit('CHANGESTR',data)
},1000)
}
}
/* 可以使用modules把vuex分模块 */
const modules={
}
export default {
/* 保证模块之间的数据独立运行,不互相影响 */
namespaced:true,
state,
getters,
mutations,
actions,
modules
}
store新建modules文件创建ModB.js文件：
const state = ()=>({
modbStr:'我是模块B的数据'
})
/* getters计算组件中的数据的,可以对数据进行二次加工类似于computer功能 */
/* 类似于计算属性 */
const getters= {
}
/* 在mutations中修改state中的值(修改state中的值要想留下记录必须用mutations修改) */
const mutations= {
}
/* actions是用来调后台接口的并commit提交一个mutations */
const actions= {
}
/* 可以使用modules把vuex分模块 */
const modules={
}
export default {
/* 保证模块之间的数据独立运行,不互相影响 */
namespaced:true,
state,
getters,
mutations,
actions,
modules
}
store下index.js文件：
/* import { set } from 'core-js/core/dict'*/
import Vue from 'vue'
import Vuex from 'vuex'
/* 先把各个模块导入进来 */
import modA from '@/store/modules/ModA.js'
import modB from '@/store/modules/ModB.js'
Vue.use(Vuex)
/* Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。
它采用集中式存储管理应用的所有组件的状态，
并以相应的规则保证状态以一种可预测的方式发生变化。 */
/* 如果需要构建一个中单行单页应用,灰考虑如何更好的在组件外部管理状态,
Vuex将会成为自然而然的选择 */
/* 导出一个Vuex实例化对象 */
export default new Vuex.Store({
/* state是用来存储组件中的数据的 */
state: {
},
/* getters计算组件中的数据的,可以对数据进行二次加工类似于computer功能 */
/* 类似于计算属性 */
getters: {
},
/* 在mutations中修改state中的值(修改state中的值要想留下记录必须用mutations修改) */
mutations: {
},
/* actions是用来调后台接口的并commit提交一个mutations */
actions: {
},
/* 可以使用modules把vuex分模块 */
/* 分模块实现数据集中管理 */
/* 在 modules 中把模块名注释一下*/
modules: {
modA:modA,
modB:modB
}
})
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）