！！！ 这个例子可以先忽略mutations
初始化一个state
const store = new Vuex.Store({ state: { name: "old name", age: 18, sex: "女", }, mutations: { changName(state) { state.name = "newName" }, addAge(state) { state.age += 1 }, changSex(state) { state.sex = state.age + "男" } } })
在组件中使用
- 直接赋值给data中的变量
这种情况会导致name直接仅仅接受了一个值，即使点击了我要改名，name也不会改变。
2 使用computed进行接收
computed会进行监听，所以只要this.$store.state.age改变，age就会改变。这也是官方推荐的写法
- 直接在页面调用显示
因为一个store是一个vue实例，所以数据变了，页面数据也会跟着变
<template> <div> <button @click="changeName">我要改名</button> <button @click="addAge">我长大啦</button> <button @click="changeName">我要改名</button> <p>{{this.$store.state.sex}}</p> <p>{{name}}</p> <p>{{age}}</p> </div> </template> <script> export default { name: "Home", data() { return { name: this.$store.state.name }; }, computed: { age() { return this.$store.state.age; } }, methods: { changeName() { this.$store.commit("changName"); }, addAge() { this.$store.commit("addAge"); }, changSex() { this.$store.commit("changSex"); } } }; </script>
mapState 辅助函数
在上面，我们推荐把值放在computed中，这样会导致一个问题，我们这里有三个变量，如果都按照上面的写法，会显得代码特别繁杂。
所以vuex提供了一个辅助函数mapState.这个函数会返回一个对象
- 先在组件中引入mapstate
import { mapState } from 'vuex'
- 具体的写法
三种写法请参考代码
computed: mapState({ // 箭头函数可使代码更简练 name: state => state.name, // 传字符串参数 'age' 等同于 `state => state.age` age: 'age', // 为了能够使用 `this` 获取局部状态，必须使用常规函数 countPlusLocalState (state) { return state.name+ data中定义的变量 } })
- 注意
当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组。
注意这里方括号，最外层的{}可以省略
computed: {mapState([ // 映射 this.count 为 store.state.count "name", "age", "sex" ]),}
因为mapState返回一个对象，所以可以使用展开运算符
computed: { ...mapState({ name: "name", age: "age", sex: "sex" }) },
