【Vue】vuex

vuex

1.什么是vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

2.什么时候用Vuex

1. 多个组件依赖于同一状态.
2. 来自不同组件的行为需要变更同一状态.

3.搭建vuex环境

1. 安装:

   npm install vuex@next --save
   

2. 创建文件: src/store/index.js

   // 引入Vue核心库
   import Vue from 'vue'
   // 引入Vuex
   import Vuex from 'vuex'
   //应用Vuex插件
   Vue.use(Vuex)
   
   //准备actions对象---响应组件中用户的动作
   const actions = {}
   //准备mutation对象---修改state中的数据
   const mutation = {}
   //准备state对象---保存具体的数据
   const state = {}
   
   // 创建并暴露store
   export default new Vuex.store({
       actions,
       mutation,
       state
   })
   

在 main.js中创建vm时传入 store配置项

......
// 引入store
import store from './store'
......

//创建vm
new  Vue({
    el: '#app',
    render: h => h(app),
    store
})

4.五个核心

State

组件内通过 this.$store.state.count 访问到.
HTML内通过 $store.state.count 访问到.

Mutation
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。

Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：

mutations: {
    increment (state) {
      // 变更状态
      state.count++
    }
  }

调用
在组件中使用:this.$store.commit('increment')
提交载荷 : this.$store.commit('increment',10) 你可以向 store.commit 传入额外的参数，即 mutation 的载荷（payload), 参数可以是字符串也可以是对象.
对象风格的提交方式:

this.$store.commit({
  type: 'increment',
  amount: 10
})

 Action

使用-参数
Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。
调用
在组件内 : this.$store.dispatch('increment')
 

this.$store.dispatch('incrementAsync', {
  amount: 10
})

// 以对象形式分发
this.$store.dispatch({
  type: 'incrementAsync',
  amount: 10
})

getters

const getters = {
    bigSum(state){
        return state.sum * 10
    }
}

//创建并暴露store
export default new Vuex.store({
    ......
    getters
})

Modules

const countAbout = {
    namespaced:true,
    actions:{.....},
    mutations:{.....},
    state:{......},
    getters:{...},
}
           
const personAbout = {
    namespaced:true,
    actions:{.....},
    mutations:{.....},
    state:{......},
    getters:{...},
}
           
const store = new Vue.store({
     modules: {
           countAbout,
           personAbout
          }
})

5.四个map方法的使用

mapState方法

mapGetters方法

mapActions方法

mapMutations方法