美文网首页
element四 状态管理中心-vuex的基础用法

element四 状态管理中心-vuex的基础用法

作者: jiahzhon | 来源:发表于2019-11-07 17:39 被阅读0次
  • State
    • 数据,存放一些公共部分的数据
  • Mutations
    • 数据怎么改变,定义改变state的一些方法
  • Actions
    • 异步改变,如果需要异步改变state,则在这书写

vue-cli3在最外部的store.js中配置,vue-cli2在src/store


image.png

在parent.vue中获取vuex的值

  • 方式1:


    image.png
  • 方式2:使用辅助函数


    image.png

触发mutation
也有辅助函数的用法


image.png

dispatch触发actions

  • getters-vuex中的计算属性
    • 当你需要依赖vuex里的state中的数据,做进一步处理时使用
state: {
count: 0,
},
// 根据state中的count进一步处理,计算双倍值
getters: {
  doubleCount (state) {
    return state.count * 2
   }
},
  • 模块化概念-Modules
    • 当vuex里的数据十分庞大时,可根据存放的数据所属模块进行划分

text.js是其中一个模块


image.png

在src/store/index.js中加入text.js模块


image.png

获取模块中的值


image.png

相关文章

网友评论

      本文标题:element四 状态管理中心-vuex的基础用法

      本文链接:https://www.haomeiwen.com/subject/orvmbctx.html