Vuex的使用

vuex的安装

npm install vuex --save

yarn add vuex

新建目录

新建文件夹store，文件index.js

全局配置

在main.js中进行配置

import Vue from 'vue'
import App from './App'
import store from './store'

new Vue({
  el: '#app',
  store,
  router,
  components: { App },
  template: '<App/>'
})

store中代码

index.js里的代码

import Vue from 'vue'
import Vuex from 'vuex'
import Corss from './corss.js'

Vue.use(Vuex)
//创建store对象
export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  corss
  }
})

corss.js中代码
也可吧代码直接写在index.js中

const state = {
 count:0
}

const mutations = {
 add(state){
    count ++
 },
  addN(state,step){
       //变更状态
	   state.count += step
   },
  change(state, value) {
    state.bLoadFlow = value;
  },
}

const actions = {
 addAsync(context){
	   setTimeout(()=>{
	     //在actions中不能直接修改state中的数据
	     //必须通过context.commit('')触发某个mutation才行
	   
	      context.commit('addN')
	   },1000)
	} 
	addAsync2(context){
	   setTimeout(()=>{
	     
	      context.commit('addN',step)
	   },1000)
	} 
}

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

使用

state：用于保存所有组件的公共数据

1、组件访问State 中数据的第一种方式

this.$store.state.corss.count

2、组件访问State 中数据的第二种方式

(1)从vuex中按需导入mapState函数
import {mapState} from vuex
(2)映射 将去全局数据，映射为当前组件的计算属性
computed:{
    ...mapState{corss,['count']}
}

mutation：用于变更store中的数据

1、触发mutations的第一种方式

this.$store.commit('函数名')
如下：
this.$store.commit('corss/add')
//触发时携带参数
this.$store.commit('corss/add'，3)

2、触发mutations的第二种方式
从vuex中按需导入mapMutations函数。

import {mapMutations} from vuex

 methods:{
   ...mapMutations(corss,['add','addN'])
   btn(){
      this.add()
   }
 }

Actions：用于处理异步操作。
action可以包含任意异步操作。actions对象里的方法需要使用store.dispatch调用。

1、触发actions的第一种方式

 methods:{
   handle(){
   //
      this.$store.dispatch('corss/addAsync')
	  
	  this.$store.dispatch('corss/addAsync',5)
   }
 }

2、触发actions的第二种方式

import {mapActions} from vuex

 methods:{
   ...mapActions(corss,['addAsync','addN'])
   btn(){
      this.addAsync()
   }
 }```


**Modules：**
     当应用变得非常复杂时，store对象就有可能变得相当臃肿。vuex允许将store分割成模块（module）,每个模块拥有自己的state、mutation、action、getter。