vuex 使用

Vuex 是什么？

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

vuex的组成

1. store
   store是vuex的核心，是vuex存储状态和管理状态方法的仓库，vuex用store在vue中构建全局的状态管理，让整个vue项目存在一个公用数据库，在任何组件中都可以访问并修改其中的状态。

2. state
   vuex中的状态（数据），它是响应式的全局状态，若state状态改变，所有组件中的state也会改变

3. getters
   使用state状态时，有时我们需要进行一些逻辑处理，比如翻转字符串等,就可以使用getter操作

   可以认为是 store 的计算属性就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

   注意，getter 在通过属性访问时是作为 Vue 的响应式系统的一部分缓存其中的。

4. mutations
   在vuex中，修改状态只有mutation一种方法，mutation只支持同步函数

   //官网实例
   const store = new Vuex.Store({
   	state:{count:0}
   	mutations:{
   		increment (state.payload) {
         	// 变更状态
         	//state即状态对象 
         	//payload:外部传参
   	      state.count++
   	    }
   	}
   })
   

5. actions
   action支持异步操作，它本身不做改变状态，而是通过提交mutation来实现状态改变的

	const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
      //context是一个与store有相同属性方法的实例
      //可以用es6的解构改写成
      
    //increment({commit}){commit('increment')}
    }
  }
})

vuex的使用

安装vuex插件
yarn add vuex -S

引入插件，在vue中注册，创建仓库

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vue.Store({
	state:{name:'zhangsan'},
	getters:{
		reverseName(state){
			return state.split('').reverse().jion('')
		}
	}
	mutations:{
		changeName(state,payload){
			state.name=payload.name
		}
	},
	actions:{
		asyncChangeName({commit},payload){
			commit('changName',payload)
		}
	}
})

在组件中使用

<template>
	<div>
		state name:{{reverseName}}
		<button @click='changeName({name:"lisi"})'>Mutation</button>
		<button @click='asyncChangeName({name:"wangwu"})'>Action</button>
	</div>
</template>
<script>
	import { mapState,mapGetters,mapActions,mapMutations } from 'vuex'
	//辅助函数返回值是对象，需要用展开运算符（...）展开，以便不影响组件自身的计算属性及方法的使用
	export default {
		computed:{
			...mapState(['name']),
			...mapGetters(['reverseName'])
		},
		methods:{
			...mapMutations(['changeName']),
			...mapActions(['asyncChangeName'])
		}
	}
</script>

vuex的模块化

1. 将各个具体哦功能模板中的store单独写，如注册，购物车等
2. 然后在整合在一个统一的store挂载到vue中

├── index.html
├── main.js
├── api
│   └── ... # 抽取出API请求
├── components
│   ├── App.vue
│   └── ...
└── store
    ├── index.js          # 我们组装模块并导出 store 的地方
    ├── actions.js        # 根级别的 action
    ├── mutations.js      # 根级别的 mutation
    ├── state.js      # 根级别的 state
    ├── getters.js      # 根级别的 getters
    └── cate
          ├── index.js          # cate模块并导出 store 的地方
    	  ├── actions.js       
    	  ├── mutations.js      
          ├── state.js      
          ├── getters.js      

/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import actions from './actions'
import mutations from './mutations'
import getters from './getters'

import homeModule from './cate'
const store = new Vuex.Store({
	state:,
	...
	modules: {
    cate: cateModule
  	}
})
export default store

/store/cate/index.js:

import Vue from 'vue'
import Vuex from 'vuex'
import state from './cate/state'
import actions from './cate/actions'
import mutations from './cate/mutations'
import getters from './cate/getters'

const store = new Vuex.Store({
	state,
	getter,
	...
})
export default cateModule