chaihongjun.me

[Vuex]入门学习之三Getter

继续学习Vuex的选项getters,根据官方的文档介绍,有一个需求情况,需要从store的state派生新的状态。这个可对应理解成Vue实例的computed属性,就像计算属性,getter的返回值会根据以来进行缓存,只有依赖发生了变化才会重新进行计算。依然是拿之前的代码做修改。

main.js 入口文件

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

没有变化

router.js 路由配置

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    }
  ]
})

也不需要改变


store.js Vuex核心

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
    state: {
        count: 0,
        //新增一个状态
        arr:[1,2,3,4,5,6]
    },
 //getter 相当于store的计算属性
   getters:{
    // doLists为新的“计算属性”
    // 返回的是不能被2整除的数组成的新数组
    doLists:function(state){
        return state.arr.filter(function(arr){
                return  arr%2!=0
        })
    }
   },
    mutations: {
        increment(state) {
            state.count++
            console.log("increment:" + state.count)
        },
        decrement(state) {
            state.count--
            console.log("decrement:" + state.count)
        }
    },
    actions: {}
})


Home.vue

<template>
    <div class="home">
        <p>这是主页</p>
        <HelloWorld msg="请打开浏览器控制台" />
        <button @click="decrement">-1</button>
        <p>{{$store.state.count}}</p>
      <!-- 
         当前组件引入了store 
         通过差值展现结果
      -->
    <p>vuex的getters计算结果:{{$store.getters.doLists}}</p>
    </div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import store from '@/store'
export default {
    name: 'home',
    components: {
        HelloWorld
    },
    methods: {
        decrement() {
            store.commit('decrement')
            for(let obj in store)
            {
                console.log('obj:'+obj);
            }
        }
    }
}
</script>

store.js 状态模块处理的数据放在Home组件去显示,直接通过差值展现,需要注意的是引入方法

$store.getters.状态名称

其他文件没有改变。

总结一下,getters可以看成是store里面状态的计算属性。如果需要去对应理解:

new Vuex.Store() =>new Vue
state => data
getters = > computed


知识共享许可协议本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。作者:柴宏俊»