vuex基本使用

 

创建一个 store

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count += 1
    }
  },
  actions: {},
  modules: {}
})

 

获取state值

1. 在标签中直接调用

<div>count: {{ $store.state.count }}</div>

 

2.通过计算属性

<div>count: {{ count }}</div>

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

 

3.当一个组件需要多个状态的时候，可以借助 mapState 辅助函数来实现

// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'

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

    // 传字符串参数 'count' 等同于 `state => state.count`
    countAlias: 'count',

    // 为了能够使用 `this` 获取局部状态，必须使用常规函数
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}

 

4. 当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组。

computed: mapState([
  // 映射 this.count 为 store.state.count
  'count'
])

 

5. 通过 对象展开运算符 实现

computed: {
    ...mapState(["count"])
},

 

 

Getters

getters可以当作是 store 的计算属性，就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

 

store中state内容

state: {
    todos: [{
        id: 1,
        text: '...',
        done: true
      },
      {
        id: 2,
        text: '...',
        done: false
      }
    ]
},

 

1. Getter 接受 state 作为其第一个参数

getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
　　 }
},

// 属性访问
store.getters.doneTodos     // -> [{ id: 1, text: '...', done: true }]

 

2.Getter 也可以接受 getters 作为第二个参数：

getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    },
    doneTodosCount: (state, getters) => {
      return getters.doneTodos.length
　　 }
},


this.$store.getters.doneTodosCount;    // 1， 通过属性访问

 

3.通过方法访问

也可以通过让 getter 返回一个函数，来实现给 getter 传参。

getters: {
  // ...
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}

store.getters.getTodoById(2)     // -> { id: 2, text: '...', done: false }

注意，getter 在通过方法访问时，每次都会去进行调用，而不会缓存结果。

 

4. mapGetters 辅助函数访问

computed: {
    // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
    ])
}    

// 如果你想将一个 getter 属性另取一个名字，使用对象形式：
computed: {
    ...mapGetters({
      // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
      doneCount: "doneTodosCount"
    })
 },