<view>{{userAge}}</view>
<view>{{orderName}}</view>
<view>{{hasLogin}}</view>
<view>{{token}}</view>
</view>
</template>
<script>
import {
mapState,
mapMutations
} from "vuex"
export default {
data() {
return {}
},
computed: {
// 原生
hasLogin() {
return this.$store.state.hasLogin
},
token() {
return this.$store.state.token
}
// 仓库root属性 可以直接 magic 赋值
// ...mapState(["hasLogin", "token"]),
// 因为 modules 下的属性使用了命名空间 所以不能使用数组方式的 magic
...mapState({
userName: state => state.user.name,
userAge: state => state.user.age,
orderName: state => state.order.name
}),
// 更多示例
...mapState({
hasLogin(state) {
return state.hasLogin
},
token(state) {
return state.token
}
}),
...mapState({
hasLogin: (state) => {
return state.hasLogin
},
token: (state) => {
return state.token
}
}),
},
methods: {
// vuex 在使用了 modules 模式时
// mutation依然没有命名空间的概念 所以在定义 mutations 时要注意全局的唯一性
// 否则后者会覆盖前者
...mapMutations(["setHasLogin", "setToken"]),
// magic style1
...mapMutations(["setUserName", "setUserAge", "setOrderName"]),
// magic style2
...mapMutations({
setUserName(commit, userName) {
commit("setUserName", userName)
},
setUserAge(commit, userAge) {
commit("setUserAge", userAge)
},
setOrderName(commit, orderName) {
commit("setOrderName", orderName)
}
}),
// 原生写法
setUserName(userName) {
this.$store.commit("setUserName", userName)
},
setUserAge(userAge) {
this.$store.commit("setUserAge", userAge)
},
setOrderName(orderName) {
this.$store.commit("setOrderName", orderName)
}
}
}
</script>
