手机版网站建设合同范本,企业展示型网站php,福田欧曼官网,北京网站推广公司1.概念
在Vue中实现集中式状态#xff08;数据#xff09;管理的一个Vue插件#xff0c;对vue应用中多个组件的共享状态进行集中式的管理#xff08;读/写#xff09;#xff0c;也是一种组件间通信的方式#xff0c;且适用于任意组件间通信。
2.何时使用#xff1f;…1.概念
在Vue中实现集中式状态数据管理的一个Vue插件对vue应用中多个组件的共享状态进行集中式的管理读/写也是一种组件间通信的方式且适用于任意组件间通信。
2.何时使用
多个组件需要共享数据时
3.搭建vuex环境
1创建文件src/store/index.js
// 该文件用于创建Vuex中最为核心的store
import Vue from vue
// 引入Vuex
import Vuex from vuex
// 应用vuex插件
Vue.use(Vuex)// 准备actions——用于响应组件中的动作
const actions {}
// 准备mutations——用于操作数据state
const mutations {}
// 准备state——用于存储数据
const state {}// 创建并暴露store
export default new Vuex.Store({actions,mutations,state,
})2在main.js中创建vm时传入store 配置项
// 引入Vue
import Vue from vue
// 引入App
import App from ./App.vue
// 引入插件
import VueResource from vue-resource
// 引入store
import store from ./store
// 关闭Vue的生产提示
Vue.config.productionTip false
// 使用插件
Vue.use(VueResource)// 创建vm
new Vue({el:#app,render:h h(App),store,beforeCreate(){Vue.prototype.$bus this}
})
4. 基本使用
1初始化数据、配置actions、配置mutations操作文件store.js
// 该文件用于创建Vuex中最为核心的store
import Vue from vue
// 引入Vuex
import Vuex from vuex
// 应用vuex插件
Vue.use(Vuex)
// 准备actions——用于响应组件中的动作
const actions {jiaOdd(context,value){console.log(actions中的jiaOdd被调用了,context)if (context.state.sum % 2) {context.commit(JIA,value)}}
}
// 准备mutations——用于操作数据state
const mutations {JIA(state,value){console.log(mutations中的JIA被调用了)state.sum value},
}
// 准备state——用于存储数据
const state {sum:0 //当前的和
}// 创建并暴露store
export default new Vuex.Store({actions,mutations,state,
})2组件中读取vuex中的数据$store.state.sum
3组件中修改vuex中的数据$store.dispatch(action中的方法名数据)或$store.commit(mutations中的方法名,数据) 备注若没有网络请求或其他业务逻辑组件中也可以越过actions即不写dispatch直接写commit getters的使用
#####1概念 当state中的数据需要经过加工后再使用时可以使用getters加工。 2在store.js中追加getters配置
// 准备getters——用于将state中的数据进行加工
const getters {bigSum(state){return state.sum *10}
}
// 创建并暴露store
export default new Vuex.Store({......getters
})(3)组件中读取数据$store.getters.bigSum
6.四个map方法的使用
1mapState方法用于帮助我们映射state中的数据为计算属性
computed:{// 借助mapState生成计算属性从state中读取数据。对象写法// ...mapState({he:sum,xuexiao:school,xueke:subject}),// 借助mapState生成计算属性从state中读取数据。数组写法...mapState([sum,school,subject]),},2.mapGetters方法用于帮助我们映射getters中的数据为计算属性
computed:{// 借助mapGetters生成计算属性从getters中读取数据。对象写法// ...mapGetters({bigSum:bigSum}),// 借助mapGetters生成计算属性从getters中读取数据。数组写法...mapGetters([bigSum]),},3. mapActions方法用于帮助我们生成与actions对话的方法即包含$store.dispatch(xxx)的函数
methods: {// 借助mapActions生成对应的方法方法中会调用dispatch去联系actions(对象写法)...mapActions({incrementOdd:jiaOdd,incrementWait:jiaWait})// 借助mapActions生成对应的方法方法中会调用dispatch去联系actions(数组写法)// ...mapActions([jiaOdd,jiaWait])},4. mapMutations方法用于帮助我们生成与mutations对话的方法即包含$store.commit(xxx)的函数
methods: {// 借助mapMutations生成对应的方法方法中会调用commit去联系mutations(对象写法)...mapMutations({increment:JIA,decrement:JIAN}),// 借助mapMutations生成对应的方法方法中会调用commit去联系mutations(数组写法)// ...mapMutations([JIA,JIAN]),mapActions与mapMutations使用时若需要传递参数需要在模板中绑定事件时传递好参数否则参数是事件对象。 7.模块化命名空间
1目的让代码更好维护让多种数据分类更加明确。
2修改store.js
const countAbout {namespaced:true,//开启命名空间state:{x:1},mutations:{......},actions:{.......},getters:{bigSum(state){return state.sum * 10}}
}const personAbout {namespaced:true,//开启命名空间state:{...},mutations:{......},actions:{.......}
}const store new Vuex.Store({modules:{countAbout,personAbout}
})3开启命名空间后组件中读取state数据
//方式一自己直接读取
this.$store.state.personAbout.list
//方式二借助mapState读取...mapState(countAbout,[sum,school,subject]),4开启名米个空间后组件中读取getters数据
//方式一自己直接读取
this.$store.getters[personAbout/firstPersonName]
//方式二借助mapGetters读取
...mapGetters(countAbout,[bigSum])5开启命名空间后组件中调用dispatch
//方式一自己直接读取
this.$store.dispatch(personAbout/addPersonWang,personObj)
//方式二借助mapActions读取
...mapActions(countAbout,{incrementOdd:jiaOdd,incrementWait:jiaWait})(6)开启命名空间后组件中调用commit
//方式一自己直接读取
this.$store.commit(personAbout/ADD_PERSON,personObj)
//方式二借助mapMutations读取
...mapMutations(countAbout,{increment:JIA,decrement:JIAN}),
