网站商城功能,广东一站式网站建设费用,品牌网站建设h5,幸福人寿保险公司官方网站简介
Vuex 是 Vue.js 应用的状态管理模式#xff0c;它为应用内的所有组件提供集中式的状态#xff08;数据#xff09;管理。可以帮我们管理 Vue 通用的数据 (多组件共享的数据)。
Vuex的构成 state#xff1a;state 是 Vuex 的数据中心#xff0c;也就是说state是用来…简介
Vuex 是 Vue.js 应用的状态管理模式它为应用内的所有组件提供集中式的状态数据管理。可以帮我们管理 Vue 通用的数据 (多组件共享的数据)。
Vuex的构成 statestate 是 Vuex 的数据中心也就是说state是用来存储数据的。 gettersstate 对象读取方法。Vue Components 通过该方法读取全局 state 对象。 mutations状态改变操作方法。 是 Vuex 修改 state 的唯一推荐方法其他修改方式在严格模式下将会报错。 该方法只能进行同步操作 且方法名只能全局唯一。 操作之中会有一些 hook 暴露出来 以进行state 的监控等。 actions操作行为处理模块。 负责处理 Vue Components 接收到的所有交互行为。 包含同步/异步操作 支持多个同名方法 按照注册的顺序依次触发。 向后台 API 请求的操作就在这个模块中进行 包括触发其他 action 以及提交 mutation 的操作。 该模块提供了 Promise的封装 以支持 action 的链式触发。 modules将 Store 分割成模块每个模块拥有自己的 State、Getters、Mutations Actions。 Vuex的使用
1、安装 Vuexnpm install vuex。
2、创建store示例
store对象
import Vue from vue;
import Vuex from vuex;Vue.use(Vuex);export default new Vuex.Store({state: {count: 0},mutations: {increment(state) {state.count;}},actions: {increment({ commit }) {commit(increment);}},getters: {count: state state.count}
});
在 Vue 根实例中注册store
import Vue from vue;
import App from ./App.vue;
import store from ./store;new Vue({store,render: h h(App)
}).$mount(#app);
在组件中使用 Store
export default {computed: {count() {return this.$store.state.count;}},methods: {increment() {this.$store.dispatch(increment);}}
}; 使用Vuex内容扩展
在真正开发中使用vuex时会有好多细节知识和注意事项下面我们扩展一下仅供参看 Vue 组件中获得 Vuex 状态(State) 方式一 this.$store.state获取 通过在根实例中注册 store 选项该 store 实例会注入到根组件下的所有子组件中且子组件能通过 this.$store 访问到 computed: {count () {return this.$store.state.count}
} 方式二 mapState 辅助函数获取推荐 当一个组件需要获取多个状态时候将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题我们可以使用 mapState 辅助函数帮助我们生成计算属性 templatediv{{count}}/div
/template
script
import { mapState }from vuex
export default{computed:{...mapstate([count])}
}
/script
Getter的定义和获取方式
定义getters
需要显示所有大于5的数据正常的方式是需要list在组件中进行再一步的处理但是getters可以帮助我们实现它
【下面getters引用的state中的数据list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]】
getters: {// getters函数的第一个参数是 state// 必须要有返回值filterList: state state.list.filter(item item 5)
}获取getters 方式一 通过属性访问 this.$store.getters.filterList 方式二辅助函数 - mapGetters templatediv{{filterList}}/div
/template
script
import { mapGetters }from vuex
export default{computed:{...mapGetters([filterList])}
}
/script Vue组件中调用Vuexmutations中的方法 直接通过 store 调用 $store.commit(模块名/xxx , 额外参数)通过 mapMutations 映射 1、默认根级别的映射 mapMutations([ ‘xxx’ ]) 2、子模块的映射 mapMutations(‘模块名’, [‘xxx’]) - 需要开启命名空间 方式一普通调用方式 this.$store.commit(addCount) 此为不带参数的写法this.$store.commit(addCount, 10) 此为带参数写法 templatediv clickaddData{{count}}/div
/template
script
export default{methods: {addData() {this.$store.commit(increment)}}
}
/script 方式二辅助函数- mapMutations mapMutations是将所有mutations里面的方法映射为实例methods里面的方法 templatediv clickaddData{{count}}/divdiv clickincrement{{count}}/div
/template
script
export default{
import { mapMutations } from vuexmethods: {// 有别名的写法[对应第一行div]...mapMutations({addData:increment})// 同名的简写[对应第二行div]...mapMutations([increment])}
}
/script
Vue组件获取Vuexactions中的方法
直接通过 store 调用 $store.dispatch(模块名/xxx , 额外参数)通过 mapActions 映射 1、默认根级别的映射 mapActions([ ‘xxx’ ]) 2、子模块的映射 mapActions(‘模块名’, [‘xxx’]) - 需要开启命名空间 方式一普通调用方式 this.$store.dispatch(increment) this.$store.dispatch(increment,{num: 10}) templatediv clickaddData{{count}}/div
/template
script
export default{methods: {addData() {this.$store.dispatch(increment)}}
}
/script 方式二辅助函数 -mapActions mapActions 是把位于 actions中的方法提取了出来映射到组件methods中 templatediv clickincrement{{count}}/div
/template
script
export default{
import { mapActions } from vuexmethods: {...mapActions ([increment])}
}
/script
