这里是仓库的代码
// 引入Vue构造函数
import Vue from "vue"
//引入 vuex
import vuex from "vuex"
//将vuex挂载到vue
Vue.use(vuex);
//创建仓库
var store =new vuex.Store({
state:{
title:"hello world",
n:10
},
//相当于组件的computed 计算属性 但是getters是vuex提供的计算方法
getters:{
//举个栗子 使用 count求和
count(state){
//一个空的变量保存状态
var s=0;
// for 循环
for(var i=0;i<state.n;i++){
//将每次循环的值赋给这个s变量
s+=i
}
//循环后将s保存的和 返回
return s
}
}
})
//导出创建的仓库
export default store
这里是main.js 代码
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
//引入 创建的store仓库
import store from "./store";
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
//将store挂载到vue
store,
components: { App },
template: '<App/>'
})
这是组件的代码
<template>
<div>
<!-- 这里的count是store中的getters定义的count计算方法-->
{{count}}
</div>
</template>
<script>
// mapGetters 辅助函数
import {mapGetters} from "vuex"
export default {
name: "Home",
//computed是计算机属性 当依赖的属性值发生改变 自动调用
computed:{
// mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性
...mapGetters([
'count',
])
}
}
</script>
<style scoped>
</style>
官方文档的地址
https://vuex.vuejs.org/zh/guide/getters.html
网友评论