4.vue知识点vuex

---

一、基础示例

1.目的

这块主要是能存取数据并且 computed 和 watch vuex上的数据就可以了
1

2.定义vuex

• 过程

  • (1).在store的state中存入了counter，mutations中定义了函数
    

    

  • (2).然后把这个store放在了#app对象中
    

3.使用vuex

• (1)组件定义

      <div>localCounter:{{localCounter}}div>
      <button @click="addCounter">修改localCounterbutton>
  1
  2

  
  接着在组件中可以直接通过this.$store.state.counter调用，通过commit(方法名)的方式调用mutations中定义的方法

• (2)computed中

  • 代码
    
    

    注：commit(‘方法名’,‘还可以附加属性或者对象(大多数情况),便于方法调用’)

  • 效果
    点击四次按钮：
    

• (3)watch中监听store中counter值的变化

  • 代码
    

  • 效果
    打印变化过程：
    

二、mapState

1.作用

简化状态的获取
1

2.使用

• (1)store定义
  

• (2)组件使用store里面的数据

      <div>localName:{{localName}}div>
      <div>localAge:{{localAge}}div>
  1
  2

  mapState 函数返回的是一个对象，和局部计算属性混合使用需要借助 …(对象展开运算符)

      computed:{
          ...mapState({//与局部计算属性混合使用
              localName:state=>state.myobj.name,
              localAge:'age'//传递字符串'age'等价于   state=>state.age
          })
      },
  1
  2
  3
  4
  5
  6

• (3)效果
  

3.注意

• (1)说明：
  传递字符串’age’这种方式只适用于获取state.age，不可以用来获得state.myobj的内部属性，即’myobj.age’是不等价于 state=>state.myobj.age的，但是可以先获取对象’myobj’,然后再利用’.'获取对象属性

• (2)代码

      <div>localName:{{localobj.name}}div>
      <div>localAge:{{localobj.age}}div>
  1
  2

      ...mapState({//与局部计算属性混合使用
          //localName:state=>state.myobj.name,
          localobj:'myobj'//传递字符串'myobj'等价于   state=>state.myobj
      })
  1
  2
  3
  4

• (3)效果
  

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RtNZhhUa-1663124384159)(/assets/vuex12.png)]

参考

①官方文档
②最简单的 Store
③mapState 辅助函数