Vuex分享(1)

之前写Vue的时候没有用到Vuex, 平时都是在methods里面写写方法调调接口之类的,Vuex适合组件多处引用,并频繁统一更新的场景,比如电商购物车之类的(个人理解). 学习了几天对Vuex有了初步的了解,下面跟大家分享一下.

前提: 安装vue-cli, 初始化项目已经完成 
说明: 我只分享自己感觉舒服的做法 多种实现方式就不介绍了

NPM安装

npm install vuex --save

在main.js中引入

import Vuex from 'vuex'

Vue.use(Vuex)

创建store

const store = new Vuex.Store({
  state: {
    count: 0
  }
})

注入到Vue实例中, 在其他页面可以通过this.$store获取

new Vue({
  el: '#app',
  router,
  store,
  components: {
    App
  },
  template: '<App/>'
})

State

Vuex的数据源,我把它理解成我们平时页面中的data属性,
那么如何在Vue组件中获取Vuex的状态呢?我们来看一个例子.

Vuex的存储状态是响应式的所以我们在组件的计算属性computed中来获取.

 computed: {
      count() {
        return this.$store.state.count
      }
    }

在页面上创建一个div我们来做一下绑定看效果

 <div> state中的count: {{ count }}</div>

效果如下:

mapState 辅助函数

当组件中存在多个状态时,全部声明为计算属性很冗杂,我们可以使用mapState来解决.

import { mapState } from 'vuex'

export default {
    name: "HelloWorld",
    computed: {
        ...mapState({
         // 箭头函数可使代码更简练
         count: state => state.count
        })
    }
  };

Getter

store的计算属性,getter的返回值会根据它的依赖被缓存起来，
且只有当它的依赖值发生了改变才会被重新计算.

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, done: true },
      { id: 2, done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

在组件中获取getters

computed: {
      doneTodos() {
        return this.$store.getters.doneTodos
      }
}

页面标签绑定

<div> getters中的doneTodos: {{ doneTodos }}</div>

效果如下:

mapGetters 辅助函数

mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性

import { mapGetters } from 'vuex'

export default {
 
  computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters({
      doneTodos: 'doneTodos'
    })
  }
}

下次介绍store中状态改变的方法Mutation 和 Action ,谢谢...