社保官方网站登录入口,商标设计网站图,建设局工资一年多少钱,中国建设银行总行门户网站1. vuex是什么 概念#xff1a;专门在Vue中实现集中式状态#xff08;数据#xff09;管理的一个Vue插件#xff0c;对Vue应用中多个组件的共享状态进行集中式的管理#xff08;读/写#xff09;#xff0c;也是一种组件间通信的方式#xff0c;且适用于任意组件间通信…1. vuex是什么 概念专门在Vue中实现集中式状态数据管理的一个Vue插件对Vue应用中多个组件的共享状态进行集中式的管理读/写也是一种组件间通信的方式且适用于任意组件间通信。这个怎么理解呢可以暂时理解成全局事件总线、消息订阅与发布一样的道理把vuex当成是外部的一个储存空间内部储存着方法和状态。看一下图 其中呢 state是一个对象目的是保存具体的数据 actions对象目的是响应组件中用户的动作可以理解成里面储存的是方法里面可以写同步方法也可以写异步方法 mutations对象目的是修改state中的数据是同步的 2. 什么时候使用vuex
多个组件依赖于同一状态来自不同组件的行为需要变更同一状态
3. 搭建环境
创建文件: src/store/index.js
// 引入 Vue 核心库
import Vue from vue
// 引入vuex
import Vuex from vuex
// 引用 vuex
Vue.use(Vuex)// 创建并暴露store
export default new Vuex.Store({
// 准备state对象 —— 保存具体的数据
state: {num: 0
},
// 准备actions对象 —— 响应组件中用户的动作
actions: {},
// 准备mutations对象 —— 修改state中的数据
mutations: {}
})在main.js中创建vm时传入store配置项
// 引入 store
import store from ./store
...
// 创建vm
new Vue({router,store,render: h h(App)
}).$mount(#app)4. 基本使用
初始化数据、配置actions、配置mutations、操作文件store.js
// 引入 Vue 核心库import Vue from vue// 引入vueximport Vuex from vuex// 引用 vuexVue.use(Vuex)// 创建并暴露storeexport default new Vuex.Store({// 初始化数据state: {num: 0},actions: {// 响应组件中加的动作jia (context, value) {// console.log(action中的jia被调用了‘context, value)context.commit(JIA, value)}},mutations: {// 执行JIAJIA (state, value) {// console.log(mutations中的JIA被调用了, state, value)state.sum value}}})组件中读取vuex中的数据:$store.state.sum组件中修改vuex中的数据:$store.dispatch(action中的方法名, 数据)或者$store.commit(mutations中的方法名, 数据)
5. getters的使用
概念当state中的数据需要经过加工后再使用时可以使用getters加工类似于计算属性computed在store.js中追加getters配置 getters: {bigSum (state) {return state.sum * 10}},在组件中读取数据: $store.getters.bigSum
6. 四个辅助函数map方法的使用
mapState方法用于帮助我们映射state中的数据为计算属性 组件内我们可以写作computed: mapState({sum: sum, school: school}) 但是由于组件内除了state的数据我们可能还有其他计算属性所以我们利用·ES6·语法进行解构下方mapGetters同理 computed:{// 借助mapState生成计算属性sum,school(对象写法)...mapState({sum: sum, school: school})// 借助mapState生成计算属性sum,school(数组写法)...mapState([sum, school])
}mapGetters方法用于帮助我们映射getters中的数据为计算属性
computed:{// 借助mapGetters生成计算属性bigSum(对象写法)...mapGetters({bigSum: bigSum})// 借助mapGetters生成计算属性bigSum(数组写法)...mapGetters([bigSum])
}mapActions方法用于帮助我们生成与actions对话的方法即包含$store.dispatch(xxx)的函数
methods:{// 靠mapActions生成方法bigSum(对象写法)...mapActions({bigSum: bigSum})// 靠mapActions生成方法bigSum(数组写法)...mapActions([bigSum])
}mapMutations方法用于帮助我们生成与mutations对话的方法即包含$store.commit(xxx)的函数
methods:{// 靠mapMutations生成方法bigSum(对象写法)...mapMutations({bigSum: bigSum})// 靠mapMutations生成方法bigSum(数组写法)...mapMutations([bigSum])
}一个不错的示例准备父组件App.vue、vuex的store.js、子组件MySchool.vue、MyStuden.vue 1. App.vue中引入一个动态组件的概念 2. store.js文件中 3. myschool.vue组件内 4. MyStudent.vue组件 疑问对于上述不错的案例我们能体会到vuex帮我们共享数据的方便但上述案例还有个不足是什么呢 学校状态数据和一些与学校无关的数据状态count、price都在一个state中设置假若学生的数据状态也需要共享,是不是也要放在state,上述中目前只有一个action,若在有一个操作学生组件的方法呢是不是也要放在action中呢mutations和getters同样的问题那么针对这几个问题我们就形成了如下的形式 actions、mutations、getters同理这就造成了混乱与臃肿不利于开发和维护所以我们最好将他们拆解为单独的模块每一个模块控制数据自己模块的数据与方法这就需要vuex的模块化 7. 模块化 命名空间namespaced
目的 让代码更好维护让多种数据分类更加明确模块独立自己掌控自己的状态与方法修改store.js
const aboutModule {namespaced: true, // 开启命名空间state: {...},mutations: {...},actions: {...},getters: {...}
},const userModule {namespaced: true, // 开启命名空间state: {...},mutations: {...},actions: {...},getters: {...}
},
const store new Vuex.Store({modules: {aboutModule,userModule }
})开启命名空间后组件中读取state数据
// 方式一直接自己读取
this.$store.state.aboutModule.list
// 方式二借助mapState读取
...mapState(aboutModule,[list, name])开启命名空间后组件中读取getters数据
// 方式一直接自己读取
this.$store.getters[aboutModule/list]
// 方式二借助mapGetters读取
...mapGetters(aboutModule,[list, name])开启命名空间后组件中调用dispatch
// 方式一直接自己读取
this.$store.dispatch(aboutModule/getList, params)
// 方式二借助mapActions读取
...mapActions(aboutModule,{getList, getData})开启命名空间后组件中调用commit
// 方式一直接自己读取
this.$store.commit(aboutModule/getList, params)
// 方式二借助mapMutations读取
...mapMutations(aboutModule,{getList, getData})
