一、基础示例
1.目的
这块主要是能存取数据并且 computed 和 watch vuex上的数据就可以了
2.定义vuex
- 过程
-
(1).在store的state中存入了counter,mutations中定义了函数
-
(2).然后把这个store放在了#app对象中
-
3.使用vuex
-
(1)组件定义
<div>localCounter:{{localCounter}}</div> <button @click="addCounter">修改localCounter</button>
接着在组件中可以直接通过this.$store.state.counter调用,通过commit(方法名)的方式调用mutations中定义的方法 -
(2)computed中
-
代码
注:commit(‘方法名’,‘还可以附加属性或者对象(大多数情况),便于方法调用’)
-
效果
点击四次按钮:
-
-
(3)watch中监听store中counter值的变化
-
代码
-
效果
打印变化过程:
-
二、mapState
1.作用
简化状态的获取
2.使用
-
(1)store定义
-
(2)组件使用store里面的数据
<div>localName:{{localName}}</div> <div>localAge:{{localAge}}</div>
mapState 函数返回的是一个对象,和局部计算属性混合使用需要借助 …(对象展开运算符)
computed:{ ...mapState({//与局部计算属性混合使用 localName:state=>state.myobj.name, localAge:'age'//传递字符串'age'等价于 state=>state.age }) },
-
(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>
...mapState({//与局部计算属性混合使用 //localName:state=>state.myobj.name, localobj:'myobj'//传递字符串'myobj'等价于 state=>state.myobj })
-
(3)效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RtNZhhUa-1663124384159)(/assets/vuex12.png)]