vuex的使用

什么是vuex？

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

简单理解为就是，当多个组件之间都需要使用同一个数据时，就可以通过vuex来管理这个数据，避免数据在当前组件，而其他组件也需要使用时，来回传递带来的繁琐性！

1.引入

一般使用vuex都会依赖于脚手架（cli），所以这里就只说在cli上的使用了！

通过npm的方式
npm install vuex@next --save
通过yarn的方式
yarn add vuex@next --save

两者没有区别，只是引入方式不同 --save是把模块自动写入到packages.json中，@next为安装最新版本

2.配置

首先在src创建一个store文件夹，在store文件夹下面创建一个index.js文件，注意，命名没有限制，在index.js里写入

import Vue from 'vue'
import Vuex from 'vuex'
//将vuex挂在到vue实例上
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    name:'小白'，
    age : 24,
    sex: '男'
  },
  getters: {
     calculation(state){
      return `姓名:${state.name}年龄:${state.age}`
    }
  },
  mutations: {
    increment (state,_name) {
      // 变更状态
      state.name = _name
    }
    changeSex(state,_sex) {
      // 变更状态
      state.sex= _sex
    }
  },
  actions: {
    asynchronous({commit,state},_sex){
      setTimeout(() => {
        commit('changeSex',_sex)
      }, 1000)
      console.log(commit);// mutations中的方法
      console.log(state); // {name:'小白'，age : 24,sex:'男'}
      console.log(_sex); //传递的参数 '女'
    }
  },
  modules: {
  }
})

在main.js里引入

import Vue from 'vue'
//引入的路径根据自己写的为主
import store from './store'
new Vue({
  store
  render: h => h(App)
}).$mount('#app')

3.五个对象的介绍

3.1 state ：用来存储数据，类似于data

3.2 getters ：用来计算state中的数据，类似于计算属性

3.3 mutations ：更改state的属性，必须是同步的，如果需要异步需要使用actions，mutations中的方法接受参数为，第一个参数为state中的数据，第二个为组件调用当前回调函数时所传的参数

3.4 actions：和mutations大致一致，不同点在于，actions中的方法最终会提交给mutations，他不能直接修改state中的数据，actions中可以包含任意异步操作，如：请求数据

3.5 modules：模块化vuex，可以将vuex细化，分给属于自己的模块

4.代码使用

数据为2中配置的在组件中的使用

//组件标签中
 {{$store.state.name}}
//组件方法中
 this.$store.state.age

//另外一种通过辅助函数mapState 
import { mapState } from 'vuex'
export default {
// 使用对象展开运算符将... getter 混入 computed 对象中
  // computed: {
    ...mapState ([
      'sex'
    ])
  }
}
//直接this.sex使用

getters的使用

//组件标签中
 {{$store.getters.calculation}}
//组件方法中
 this.$store.getters.calculation
//另外一种通过辅助函数mapGetters
import { mapGetters } from 'vuex'
export default {
// 使用对象展开运算符将... getter 混入 computed 对象中
  // computed: {
    ...mapGetters([
      'calculation'
    ])
  }
}
//此时calculation方法就相当于本组件中计算属性中的一个方法，怎样使用计算属性中的方法就怎样使用calculation方法

mutations的使用

//组件标签中
 {{$store.mutations.increment('香香') }}
//组件方法中
 this.$store.mutations.increment('香香')

//另外一种通过辅助函数mapMutations 
import { mapMutations } from 'vuex'
export default {
// 使用对象展开运算符将... getter 混入 methods 对象中
  // methods: {
    ...mapMutations ([
      'increment'
    ])
//可以直接this.increment('香香')调用
//映射
     ...mapMutations ({
      add:'calculation'
    })
//可以直接this.add('香香')调用
  }
}

actions的使用

//组件标签中
 {{$store.dispatch('asynchronous',女)}}
//组件方法中
 this.$store.dispatch('asynchronous',女)

//另外一种通过辅助函数mapActions 
import { mapActions } from 'vuex'
export default {
// 使用对象展开运算符将... getter 混入 methods 对象中
  // methods: {
    ...mapActions  ([
      'asynchronous'
    ])
//可以直接this.increment('香香')调用
//映射
     ...mapActions  ({
      add:'asynchronous'
    })
//可以直接this.add('香香')调用
  }
}

modules的使用

store目录下新建一个文件，为模块vuex文件，内容为

export default({
  state: {
    name:'香香',
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  
  }
})

index.js文件中

import Vue from 'vue'
import Vuex from 'vuex'
import modular from '新建文件路径'

export default new Vuex.Store({
  state: {
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
    modular
  }
})

模块里的数据使用与index.js中的区别是需要在数据前加上模块的名字不然这里的name使用为$store.state.modular.name其他的类似