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

• 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