（学习笔记）vuex

1.特性

1.响应式。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

2.不能直接改变 store 中的状态改变。 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

2.简单使用**

1.main.js引入并挂载

import store from './store'

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

2.创建store/index.js

访问state属性，this.$store.state.count

调用mutation方法,this.commit('increment') 

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);

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

3.mapState函数获取多个属性

计算属性中使用，根据字符串展开指定state

import { mapState } from 'vuex'
computed: {
  // 映射 this.count 为 store.state.count
  ...mapState(['count',])
}

4.getters属性

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

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

getters接收getters作为第二个属性

getters: {
  // ...
  doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  }
}

通过方法进行访问

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

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

批量导入getters

import { mapGetters } from 'vuex'

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

5.mutations

更改state的唯一方法。mutation方法仅接收两个参数，第一个state，第二个要传的值，如果有多个合并成列表或者对象传参。调用使用commit方法，参数一mutation的函数名，第二个参数传递的值。

注意：mutation里面不能使用异步方法，用action调用异步方法。

mutations: {
  increment (state, n) {
    state.count += n
  }
}

store.commit('increment', 10)

6.action

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此可以使用context.state,context.commit,context.getters等调用store的方法。

声明：

actions: {
  incrementAsync (context，num) {
    setTimeout(() => {
      context.commit('increment', num)
    }, 1000)
  }
}

调用：

store.dispatch('incrementAsync', 10)

映射函数，把action定义的函数直接嵌入到methods里：

import { mapActions } from 'vuex'
methods:{
    ...mapActions(['increment'])
}

7.module

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

modules/xxx.js:

const state ={}
const mutations = {}
const actions = {}
const getters = {}

export default {
    namespaced: true,
    state,
    mutations,
    actions,
    getters
}

总的：

import xxx from './modules/xxx'

const store = new Vuex.store({
    modules: {
        user
    }
})

调用：

this.$store.state.模块名.属性名

this.$store.commit('模块名/xxx', 参数)