目录
基本概念
官方：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
简单来说，Vuex 是实现组件全局（数据）管理的一种机制，可以方便的实现组件之间共享数据。可以把它当成一个store仓库，可以集中管理共享的数据，并且存储在vuex中的数据都是响应式的，数据与页面同步。
一般情况下，只有组件之间共享的数据，才有必要存储到vuex中；对于组件中的私有数据，依旧存储在组件自身的data中。
使用步骤
1）.安装vuex
bash
npm install vuex --save2）.引用Vuex，并创建 Store仓库
可以在一个单独的文件（如 store.js）中创建 store，并导出它以便在其他地方使用。
javascript
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: { 定义状态 },
mutations: { 定义改变状态的方法 },
actions: { 定义执行异步操作的方法 },
getters: { 定义计算属性 }
});
export default store;3）.将 Store 挂载到 Vue 实例
javascript
import Vue from 'vue';
import App from './App.vue';
import store from './store'; // 引入上面创建的 store
new Vue({
el: '#app',
store, // 将 store 挂载到 Vue 实例上
render: h => h(App)
});4）. 在组件中使用vuex： 通过 this.$store 来访问 Vuex store
javascript
created(){
console.log(this.$store)
}核心概念
store 仓库将包含state、mutations、actions以及从 state 中派生出一些状态的计算属性getters。
1.State
state提供唯一的公共数据源，所有共享的数据都要统一放到Store中的State中存储。当组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会响应式地更新。
javascript
const store = new Vuex.Store({
// state 状态数据
state: { count: 666 }
})
//组件中访问
this.$store.state2.Getters
getters允许我们对 Store 中的数据进行加工处理形成新的数据。可以被认为是 store 的计算属性。getters和computed一样具有缓存机制。
如：在state.count的基础上派生出一个新的状态newCount出来
javascript
const store = new Vuex.Store({
state:{
count:666
},
getters:{
newCount:state => state.count * 3
// 简化箭头函数(state) => { return state.count * 3 }
}
});
//组件中获取newCount
this.$store.getters.newCount;3 .Mutations
mutations是唯一更改 store 中状态的方法。mutation必须是同步函数，因为Vuex 的状态跟踪机制依赖于同步的 mutations，当 mutation 异步执行时，Vuex 无法准确地知道何时状态已经更新，这可能导致无法正确地显示状态变化
javascript
const store = new Vuex.Store({
state:{
count:666
},
mutations:{
increment(state，value){
state.count += value;
}
}
});
//组件中调用
//通过commit提交一个名为increment的mutation
this.$store.commit("increment", 需要提交的值);4.Actions
actions可以包含任意异步操作。Action 类似于 mutation，不同在于：由于异步操作不能直接更新状态，所以Action 提交的是 mutation，而不是直接变更状态。
Action 通过 context.commit 提交一个 mutation，或者通过 context.dispatch 触发其他 action
javascript
const store = new Vuex.Store({
state: {
count:666
},
mutations: {
changeCount(state, num) {
state.count = num
}
},
actions: {
setAsyncCount (context, num) {
// 一秒后, 给一个数, 去修改 num
setTimeout(() => {
context.commit('changeCount', num)
}, 1000)
}
}
})
//组件中调用
//通过dispatch调用一个名为setAsyncCount 的action
this.$store.dispatch('setAsyncCount', 888)5.Modules
Modules每个模块拥有自己的 state、mutation、action、getter 甚至是嵌套子模块。如果把所有的状态都放在state中，随着项目的复杂化，Vuex会变得难以维护。为了方便管理，一般会将其按功能分割成不同的模块(Module)。
javascript
import Vue from 'vue';
import Vuex from 'vuex';
import moduleA from './module/moduleA' // 模块A
import moduleB from './module/moduleB' // 模块B
Vue.use(Vuex);
const store = new Vuex.Store({
state: { },
mutations: { },
actions: { },
getters: { } ,
modules: {
moduleA,
moduleB
}
});
export default store;
//子模块moduleA/moduleB
// 每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块
export default {
state: {
text: 'moduleA/moduleB'
},
getters: {},
mutations: {},
actions: {}
}
//组件调用
this.$store.state.moduleA.text;辅助函数
基本概念
一般情况下，如果需要访问vuex.store中state存放的数据，需要使用this.$store.state.属性名方式。当一个组件需要获取多个状态时候，将这些状态都声明会有些重复和冗余。为了解决这个问题，辅助函数应运而生。
通过辅助函数把vuex.store中的属性映射到vue实例身上，这样在vue实例中就能访问vuex.store中的属性了，对于操作vuex.store就变得非常方便。
|-----------|--------------|
| 属性 | 辅助函数 |
| state | mapState |
| getter | mapGetters |
| actions | mapActions |
| mutations | mapMutations |
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
基础用法
以下均为Vuex的辅助函数提供的语法糖的方式
- mapState: 将state映射到组件的computed计算属性中。组件可通过访问这些计算属性来直接获取state中的状态值。
javascript
import { mapState } from 'vuex';
export default {
computed: {
...mapState(['count']) // 将store中的count状态映射到组件的computed属性中
}
}使用mapState后，在组件的模板中，可以直接使用this.count来访问state中的count状态。
2.mapGetters：将getters映射到组件的computed计算属性中。与mapState类似，这样做可以方便地在组件中通过计算属性来访问getters返回的计算值。
javascript
import { mapGetters } from 'vuex';
export default {
computed: {
// 将store中的doneTodos getter映射到组件的computed属性中
...mapGetters(['doneTodos'])
}
}- mapMutations：将mutations映射到组件的methods方法中。这样，组件就可以通过调用这些方法来直接触发mutations，从而修改state中的状态值。
javascript
import { mapMutations } from 'vuex';
export default {
methods: {
// 将store中的increment mutation映射到组件的methods中
...mapMutations(['increment']),
addCount() {
// 调用increment方法时，会自动触发store中的increment mutation
this.increment();
}
}
}- mapActions：将actions映射到组件的methods方法中。与mutations不同，actions主要用于处理异步操作。通过映射actions，组件可以方便地触发这些异步操作。
javascript
import { mapActions } from 'vuex';
export default {
methods: {
// 将store中的incrementAsync action映射到组件的methods中
...mapActions(['incrementAsync']),
addCountAsync() {
// 调用incrementAsync方法时，会自动触发store中的incrementAsync action
this.incrementAsync();
}
}
}若有错误或描述不当的地方，烦请评论或私信指正，万分感谢 😃