目录
Vuex是什么？
如何部署
如何使用
state
基础使用
在计算属性属性中使用
使用展开运算符
mutations
基础使用
使用辅助函数（mapMutations）简化
使用常量替代 Mutation 事件类型
getters
actions
使用辅助函数（mapActions）简化
modules
在组件中使用子模块的mutations
声明namespace
官网地址：Vuex 是什么？ | Vuex (vuejs.org)
Vuex是什么？
Vuex是专门为Vue.js应用程序开发的状态管理模式。它采用集中式储存管理应用的所有组件状态，并以相应的规则保证状态以一种可预测的方式发生变化。
简单来说：状态管理就是将数据存储起来共所有的组件使用，为了保证安全使用一些规则限制一下
使用场景：保存一些需要公共使用的信息，登陆的用户信息、登录的权限信息等。
Vuex的核心：state、mutations、actions
- state：储存公共的一些数据
- mutations：定义一些方法来修改state中的数据
- actions：使用异步的方式来触发mutations中的方法进行提交
此部分的代码在vue-cli中使用
如何部署
创建vue-cli时选择部署Vuex
如果选择部署了Vuex创建的工程，在你的工程中就会多一个store文件夹，就证明可以使用。
如何使用
state
状态管理使用起来非常的简单，分为模板上使用和方法中使用
基础使用
<template><div><!--模板上直接使用-->state中的count属性count：{{$store.state.count}}</div>
</template>
<script>
export default {//页面初始化钩子mounted() {this.fun1();},methods:{fun1(){//方法中使用console.log("state中的count属性count：",this.$store.state.count);}}
}
</script>浏览器结果：
在计算属性属性中使用
当一个组件需要获取多个状态的时候，将这些状态声明成计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键
1.先在组件中导入mapState函数。mapState函数返回的是一个对象。
<script>import {mapState} from "vuex"2.在组件的计算属性中使用mapState。
computed:mapState({count:"count", //可以直接使用，用处不大，还不如直接在外面用myCount(state){// 计算属性后使用。num是本地的属性return state.count+this.num}})使用展开运算符
在之前的示例中，不方便和本地的计算属性混合使用，下面我们使用展开运算符，这样就可以和本地的计算属性一起使用
computed:{localhost(){//本地的计算属性，没有Vuex的状态参加return this.num+1},...mapState({count:"count", //可以直接使用，用处不大，还不如直接在外面用myCount(state){// 计算属性后使用。num是本地的属性return state.count+this.num}})}mutations
state中的数据是只读的，不能直接进行修改。想要修改state数据的唯一途径就是调用mutation方法。使用commit()函数，调用mutation函数。
注意：mutation中只能执行同步方法。
基础使用
在mutation中定义方法，在方法中修改state
mutations: {//state是状态，num是额外的参数，//额外的参数可以有多个，官网推荐使用对象类型。add(state,num){state.count=state.count+num;},//es6中的新语法，和上面方法效果一样add2({count},num){count=count+num}},直接调用，感觉和自定义事件有些类似，也是需要写一个事件来触发这个方法
methods:{fun2(){this.$store.commit('add',2)}
}使用辅助函数（mapMutations）简化
1.先在组件中导入mapMutations函数。
<script>import {mapMutations} from "vuex"2.在组件的方法中使用mapMutations配合展开运算符去使用。
methods:{fun1(){//方法中使用console.log("state中的count属性count：",this.$store.state.count);},...mapMutations({addFunc:'add', //将`this.addFunc()`映射为`this.$store.commit('add')`reduceFunc:'reduce'})}如果自己定义的方法名和mutations中的方法名一致，可以使用数组的方式
methods:{fun1(){//方法中使用console.log("state中的count属性count：",this.$store.state.count);},...mapMutations([add, //将`this.add()`映射为`this.$store.commit('add')`reduceByid //传参的形式，将`this.reduceByid(id)`映射为`this.$store.commit('reduceByid ',id)`])}使用常量替代 Mutation 事件类型
使用常量替代 mutation 事件类型在各种 Flux 实现中是很常见的模式。这样可以使 linter 之类的工具发挥作用，同时把这些常量放在单独的文件中可以让你的代码合作者对整个 app 包含的 mutation 一目了然：
简单来说就是：多人用的时候就方便，就跟一个单独列出来的说明书一样，找的时候好找。
// mutation-types.js
export const SOME_MUTATION = 'SOME_MUTATION'// store.js
import { createStore } from 'vuex'
import { SOME_MUTATION } from './mutation-types'const store = createStore({state: { ... },mutations: {// 我们可以使用 ES2015 风格的计算属性命名功能// 来使用一个常量作为函数名[SOME_MUTATION] (state) {// 修改 state}}
})用不用常量取决于你——在需要多人协作的大型项目中，这会很有帮助。但如果你不喜欢，你完全可以不这样做。
getters
getters就是在vuex中的计算属性。
在vuex中声明getter方法
getters:{doubleCount(state){return state.count*2}
}在组件中获取getters
methods:{fun3(){console.log(this.$store.getters.doubleCount)}
}actions
- actions中的方法可以是异步的
- actions修改state的内容，需要通过mutations
- 在组件中调用action需要调用dispatch()函数
1.声明action方法
actions:{delayAdd(context,num){// 模拟异步，延时2秒增加setTimeout(function(){//调用mutations中的方法context.commit('add',num)},2000)}
}2.直接调用action方法
func4(){this.$store.dispatch('delayAdd',2)
}使用辅助函数（mapActions）简化
1.先在组件中导入mapActions函数。
<script>import {mapActions} from "vuex"2.在组件的方法中使用mapActions配合展开运算符去使用，
使用效果和mapMutations类似
methods:{func4(){this.$store.dispatch('delayAdd',2)},...mapActions({delayAddLocal:'delayAdd' //将`this.delayAddLocal()`映射为`this.$store.dispath('delayAdd')`})
}modules
在复杂的项目中，我们不能把大量的数据堆积到store中，这样store的内容就太多，而且比较凌乱，不方便管理。所以就出现了modules。将原有的store切割成一个个的module。每个module都有自己的state、mutations、actions和getters
1.定义一个modules并导出
const storeModuleA={state:{countA:10},mutations:{addA(state){state.countA++console.log("moduleA:"+state.countA);},// 此方法和store根中的mutations方法名称一致，后面测试使用add(state){console.log("moduleA:"+state.countA);}}
}
export default storeModuleA //到导出此对象2.在store.js中，导入并注册此modules
import Vue from 'vue'
import Vuex from 'vuex'
import storeModuleA from './storeModuleA' //导入model
Vue.use(Vuex)export default new Vuex.Store({state: {count:0},mutations: {//state是状态，num是额外的参数add(state,num){state.count=state.count+num;}},actions: {},modules: {a:storeModuleA}
})
3.在组件中使用子模块中的状态
func5(){console.log(this.$store.state.a.count)
},在组件中使用子模块的mutations
- 没有声明namespace的情况
- 子模块中mutations在没有使用namespace的情况下，这些方法会注册到store根中
- 如果模块的mutations中的方法和store根中的mutations中的方法一样，则都会被调用。
func5(){console.log(this.$store.state.a.count)this.$store.commit('addA') //和根中不一样的mutations方法名this.$store.commit('add') //和根中不样的mutations方法名
},如果都被调用，肯定是不合适的
声明namespace
1.声明namespace并在module中添加
modules: {a:{namespace:true,...storeModuleA //使用展开运算符},b:{namespace:true,//不使用的情况state:storeModuleA.state,mutations:storeModuleA.mutations}
}在组件中调用加上别名即可
this.$store.commit('a/add')Wishing you a happy day
