vuex中getters类似计算属性的用法

189 阅读1分钟

一:state 全局共享数据

  • 读取vuex的数据方法 $store.state.XXX

      export default new Vuex.Store({
       state: {
         title: "南京有疫情!!!",}
    复制代码
    

二: v-bind:方式和.number都可以将字符串变成数字类型

image.png

三 组件中修改vuex中的数据:

  • $store.dispatch('action中的方法名",传过去的数据)
  • $store.commit('mutations中的方法名",传过去的数据数据)
  • mutations通过payload接收commit传过来的参数
  • actions里面的方法也是需要有形参接收,异步请求在actions里面写

image.png

image.png

image.png

四:getters

  • 计算属性 也具有缓存功能 如果state中的数据得到了改变 则getters中的方法也会发生改变
  • 如果state中的值没有发生变化,getters中属性中的值就不会发生改变

五 esl的扩展符合

image.png

image.png

image.png

image.png

image.png

通过select下拉框选择 然后在页面渲染出对应的数据 通过change和computed两种方式 getters的功能和计算属性computed类似,也需要返回一个值

image.png