Vuex 管理状态（数据）

基础

这个状态自管理应用包含以下几个部分：

• state，驱动应用的数据源；
• view，以声明方式将 state 映射到视图；
• actions，响应在 view 上的用户输入导致的状态变化。

以下是一个表示“单向数据流”理念的简单示意：

但是，当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：

• 多个视图依赖于同一状态。
• 来自不同视图的行为需要变更同一状态。

 

state用来存储模块中使用的数据

mutations是用来存储操作state中的数据的方法

action是用来存储异步的方法

vuex中修改state 只能是mutations action 不是直接修改状态 而是提交 mutation mutation去修改state

特点： vuex规定 mutation不要包含异步请求，action可以包含

我们来简单写一个数字加减的方法

vue项目中的列表如下，在./src/store/index.js中操作Vuex的状态，其中的代码如下

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

Vue.use(Vuex)

// 输出Vuex的数据
export default new Vuex.Store({
  state: {
    num: 10
  },
  mutations: {
    addNum (state, num) {
      state.num += num
    },
    reduceNum (state, num) {
      state.num -= num
    }
  },
  actions: {
    addNumAsync ({ commit }, n) {
      setTimeout(() => {
        commit('addNum', n)
      }, 2000)
    }
  },
  modules: {
  }
})

在./src/main.js中接受Vuex的数据后，我们就可以在组件调用期中的数据

import Vue from 'vue'
import App from './App.vue'
import router from './router'
// 接受Vuex的数据
import store from './store'

Vue.config.productionTip = false

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

最后，在Home组件中调用这些数据和方法

<template>
  <div>
    <h1>
      我是home页
    </h1>
    <div class="num">
      <button @click="add">增加</button>
      <button @click="addAsync">异步增加</button>
      {{$store.state.num}}
      <button @click="reduce">减少</button>
    </div>
  </div>
</template>

<script>
export default {
  mounted () {
    console.log(this)
  },
  methods: {
    // 提交mutation使用$store.commit
    add () {
      this.$store.commit('addNum', 1)
    },
    reduce () {
      this.$store.commit('reduceNum', 2)
    },
    addAsync () {
      // 提交action
      this.$store.dispatch('addNumAsync', 3)
    }
  }
}
</script>

<style lang="scss" scoped>
h1{
  color: red;
}
</style>

这样我们就可以实现对state中数据num的增加和减少以及异步增加的功能

Vue提供助手函数 简化vuex操作

mapState 简化 组件中 获取state步骤

mapMutations 简化组件中 提交mutation的操作

mapActions 简化组件中 触发action的操作

import { mapState, mapMutations, mapActions } from 'vuex


{
  methods: {
    ...mapMutations(['addNum']),
    ...mapActions(['addNumAsync'])
    // 会在methods定义 的和mutations或者action同名的方法 用于提交mutations或actions
  },
  computed: {
    ...mapState(['num', 'num2']) 
    //就在组件中 新增了 2个计算属性 num num2他们依赖是 store中的state中的同名数据
  }
}

使用状态
  {{ num }}
提交mutation
  this.addNum(参数)
提交action
  this.addNumAsync(参数)

getters

相当于 vuex中的 计算属性 使用场景：某个 状态 需要 依赖另一个状态 存在，当这个状态 改变时，getter会重新计算

store = {
  state: {
    num: 10
  },
  getters: {
    numDouble (state) {
      return state.num*2
    }
  }
}


在组件中如何获取
  1,this.$store.getters.numDouble
  2,通过助手函数
    import { mapGetters } from 'vuex'

    computed: {  // 直接通过this.numDouble使用
      ...mapGetters(['numDouble'])
    }

注意：
  不要直接修改getter的值 ，vuex也没有提供修改getter的方法，应该去修改依赖 state中的数据

module

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

const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

如何在组件中使用
  获取
    this.$store.state.模块.num
如何提交mutations 或者action
    1,this.$store.commit('addNum')
      this.$store.dispatch('addNumAsync')
注意：
  mutations和actions默认提交 没有模块化，会导致 
  所以的模块中 同名mutation或者action同时触发
？如何解决这个问题
    你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名

const moduleA = {
  namespaced: true,
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA
  }
})

提交
  this.$store.commit('a/addNum')
如果助手函数

  methods: {
    ...mapMutations(['a/addNum'])
  }
  可以通过
    this['a/addNum'](params)
  methods: {
    ...mapMutations('a', ['addNum'])
  }
    this.addNum() 提交a模块中的addNum

我们也可以将本来都写在index中的数据分离

index.js写成

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import actions from './actions'
import getters from './getters'
import modulea from './modulea'
Vue.use(Vuex) // Vue原型中会加入一个实例对象 $store

// 初始化store
const store = new Vuex.Store({
  state,
  getters,
  actions,
  mutations,
  modules:{
    a: modulea
  }
})

export default store

将原本卸载index的数据单独写一个js文件

state.js

export default {
  num: 10
}

mutation.js

export default {
  addNum (state, num) {
    state.num += num
  },
  reduceNum (state, num) {
    state.num -= num
  }
}

action.js

export default {
  addNumAsync ({commit}, n) {
    console.log(n)
    setTimeout(() => {
      commit('addNum', 5)
    }, 2000)
  }
}

getter.js

export default {
  numDouble (state) {
    return state.num * 2
  } 
}