利用vuex模块创建头条移动端,总结vuex模块化

今天学习了vuex模块化的创建,并且应用到之前用vant组件做的头条项目中去。

当vuex中数据越来越多，vuex会变得越来越难以维护，因此vuex的模块化可以方便我们对数据进行维护。

vuex的子模块存放在根模块的modules中，每个子模块都有根模块中的所有属性。子模块的state是注册在子模块局部的，mutation、action、getter是注册在全局的，如果用户为了提高子模块中数据的隐私性，可以通过配置namespaced:true开启命名空间。

组件调用vuex子模块中状态的方法：

1.直接调用（带上模块的属性名路径）
<span>{{this.$store.子模块名称.状态名称}}</span>
2.利用getter
    (1)在根模块中的getters中设置:
getters:{
    在组件中调用的名称:state => state.子模块名称.状态名称
}
    (2)在组件中调用mapGetters
 import {mapGetters} from 'vuex'
    (3)在组件的计算函数中调用
 computed:{
     ...mapGetters(['状态名称1','状态名称2'])
 }
复制代码

组件调用开启了命名空间的其他属性

1.直接调用
    this.$store.dispatch/commit('属性名/方法名'，传过去的值)
2.利用辅助函数
    (1).首先引入属性
import {mapMutations,mapActions} from 'vuex'
    (2).调用属性(带上模块的属性名路径)
methods:{
      ...mapMutations(['xxx/xxx','传回去的值'])
      ...mapActions(['xxx/xxx','传回去的值'])
}
3.利用命名空间辅助函数
import {createNamespacedHelpers} from 'vuex'
const {mapMutations} = createdNamespacedHelpers('属性名')
//然后就可以正常使用属性了
复制代码

头条tab栏利用vuex模块实现内容切换的一些知识点

1.记住不论什么情况，mutations修改数据，actions执行异步任务
2.在state中存了一个对象，对象中的属性是数组值，如果修改数组中的数据，无法实现快照，因为对象属于引用型数据，我们修改的是其在堆中的地址。可以换一个思路实现快照：

 state: {
    allList: {},
  },
  mutations: {
    // 更改对应的列表项
    updateList(state, { currentCatagtory, list }) {
      state.allList = { ...state.allList, [currentCatagtory]: list };
      // 这里的state.allList={...state.allList}是一个浅拷贝，目的是为了实现快照
      // [key]:value --  json
    },
    actions: {
    // 在这里获取所有列表，因为axios是异步函数，只能在actions中处理
    async getList(context, cataId) {
      const {
        data: {
          data: { results },
        },
      } = await axios.get(
        `http://ttapi.research.itcast.cn/app/v1_1/articles?channel_id=${cataId}&timestamp=${Date.now()}&with_top=1`
      );
      console.log(results);
      context.commit("updateList", { currentCatagtory: cataId, list: results });
    },
  },
复制代码

上述代码的逻辑是，将state中的list用数组的展开运算符加上 形参[key]:value json对象，然后在actions中调用接口，获取数据，传输实参到mutations中进行数据更新，并且实现页面快照。