国家建设人才网站,网站界面结构,重庆地产网站建设,个人建网站多少钱Vuex综合使用一、仓库1.主仓库2.子仓库二、使用1.全局#xff08;index.js和未开启命名空间的子仓库#xff09;2.子仓库#xff08;子仓库定义了namespaced: true#xff09;#xff0c;仓库名#xff1a;home3.使用strict严格模式#xff08;建议#xff09;三、批量…
Vuex综合使用一、仓库1.主仓库2.子仓库二、使用1.全局index.js和未开启命名空间的子仓库2.子仓库子仓库定义了namespaced: true仓库名home3.使用strict严格模式建议三、批量使用1、全局1.sate的辅助函数2.getters的辅助函数3.mutations的辅助函数4.actions的辅助函数2、子仓库1.sate的辅助函数2.getters的辅助函数3.mutations的辅助函数4.actions的辅助函数基础版
一、仓库
1.主仓库
// store/index.js
import Vue from vue;
import Vuex from vuex;// 引入子仓库
import home from ./modules/home.jsVue.use(Vuex);const state { //要设置的全局访问的state对象,赋予初始属性值index: home,isIndex: false,
};const getters { //实时监听state值的变化(最新状态)getIsIndex(state) { //定义函数返回处理过的val命名最好有代表性return window.location.hash.split(/)[1] state.index},
};const mutations {//自定义改变state初始值的方法这里面的参数除了state之外还可以再传额外的参数(变量或对象);// clearCatch(state, val) {// console.log(state, val)// },
};const actions {//自定义触发mutations里函数的方法context与store 实例具有相同方法和属性// clearCatchAction(context, val) {// context.commit(clearCatch, val);// },};export default new Vuex.Store({strict: true, // 此模式下所有的状态变更即更新state必须使用mutationstate,getters,mutations,actions,modules: {home}
});
2.子仓库 namespaced为true时才是代码和逻辑上的子仓库否则仅是代码上的子仓库 // store/modules/home.jsconst state {};const getters {};const mutations {};const actions {};// 注意和仓库的区别
const store {// namespaced用于在全局引用此文件里的方法时标识这一个的文件名使得让人明白这些数据来自哪个仓库// 即当你需要在别的文件里面使用子仓库(mapStates、mapGetters、mapActions)时里面的方法需要注明来自哪一个模块的方法// 若未设置默认是false即子仓库的数据也视为全局仓库中的数据此时的‘子仓库’仅仅是代码上的分割namespaced: true,state,getters,mutations,actions
}
export default store;
二、使用
1.全局index.js和未开启命名空间的子仓库 this.$store.state.isIndex this.$store.getters.getIsIndex this.$store.commit(‘clearCatch’,‘all’) this.store.dispatch(‘clearCatchAction’,‘all’) 2.子仓库子仓库定义了namespaced: true仓库名home this.$store.state.home.isIndex this.$store.getters[‘home/getIsIndex’] this.$store.commit(‘home/clearCatch’,‘all’) this.store.dispatch(‘home/clearCatchAction’,‘all’) 3.使用strict严格模式建议
export default new Vuex.Store({strict: true,// 此模式下所有的状态变更即更新state必须使用mutationstate: {...},...
}此模式下所有的状态变更即更新state必须使用mutationcommit如果在组件中直接修改state则会报错。这样的好处是所有的state的更新都体现在仓库中整改方便使用devTools调试工具时可以跟踪到状态的修改。
三、批量使用
1、全局
1.sate的辅助函数
一般是写在computed里面 mapState(*) 数组映射 computed: {// 3. mapState需要接收数组作为参数数组的元素是需要映射的状态属性// 会返回一个对象包含两个对应属性计算的方法// { count: state state.count, msg: state state.msg }// 然后这里使用扩展运算符展开对象完成之后我们就有了count和msg两个计算属性...mapState([count, msg])}字典映射可起别名防止冲突
computed: {// mapState可以传对象键是别名值是映射的状态属性...mapState({ num: count, msg:msg })}获取数据时进一步处理
...mapState({ msg:statestate.msg 。}),映射后使用this.msg
2.getters的辅助函数
一般也是写在computed里面 mapGetters(*) 数组映射 computed: {...mapGetters([getCount, getMsg])}字典映射可起别名防止冲突
computed: {...mapGetters({ num: getCount, getMsg:getMsg})}映射后使用this.getMsg
3.mutations的辅助函数
一般是写在methods里面 mapMutations(*) 数组映射 ...mapMutations([clearCatch])字典映射 ...mapMutations({clear:clearCatch}])映射后使用this.clearCatch(‘all’)
4.actions的辅助函数
一般也是写在methods里面 mapActions(*) 数组映射 ...mapActions([clearCatchAction])字典映射 ...mapActions({clearAction:clearCatchAction}])映射后使用this.clearCatchAction(‘all’)
2、子仓库
同上只是第一个参数是子仓库名称并且子仓库namespaced为true时
1.sate的辅助函数 mapState(‘name’,*) 数组映射 computed: {...mapState(home,[count, msg])}字典映射可起别名防止冲突
computed: {...mapState(home,{ num: count, msg:msg })}获取数据时进一步处理
...mapState(home,{ msg:statestate.msg 。}),映射后使用this.msg
2.getters的辅助函数
一般也是写在computed里面 mapGetters(‘name’,*) 数组映射 computed: {...mapGetters(home,[getCount, getMsg])}字典映射可起别名防止冲突
computed: {...mapGetters(home,{ num: getCount, getMsg:getMsg})}映射后使用this.getMsg
3.mutations的辅助函数
一般是写在methods里面 mapMutations(‘name’,*) 数组映射 ...mapMutations(home,[clearCatch])字典映射 ...mapMutations(home,{clear:clearCatch}])映射后使用this.clearCatch(‘all’)
4.actions的辅助函数
一般也是写在methods里面 mapActions(‘name’,*) 数组映射 ...mapActions(home,[clearCatchAction])字典映射 ...mapActions(home,{clearAction:clearCatchAction}])映射后使用this.clearCatchAction(‘all’)
