共计 2733 个字符，预计需要花费 7 分钟才能阅读完成。
Vuex 是什么，个人理解是 vue.js 中集中管理状态的一种模式。官网解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态并以相应的规则保证状态以一种可预测的方式发生变化。
如果构建的应用比较简单，没有必要使用 vuex，简单的单向数据流就能满足产品需求，体现单向数据流的简洁性，如下：
<template>
<div>{{count}}</div>
<el-button @click=”increment “>count</el-button>
</template>
new Vue({
data () {
return {
count: 0
}
},
methods: {
increment () {
this.count++
}
}
})
适用场景：
如果应用是小型的、组件不多、组件之间的状态依赖不多、结构清晰便于维护，组件之间很少有数据之间的关联，这样的情况，没必要使用 vuex。相反，哪些比较大型的应用，多个视图组件共用一个状态，一个组件的修改，需要更新其它关联的组件，此时 Vuex 比较适用。类似商城系统、外卖系统等。
Vuex 的使用：安装 vuex，在项目中执行命令：npm install vuex –save-dev 或者使用淘宝镜像 cnpm install vuex –save-dev
创建文件 && 书写代码部分：
1、创建文件夹 store，然后在里面创建文件 store.js, 并引入相关文件：
import Vue from ‘vue’
import Vuex from ‘vuex’
import getters from ‘./getters’
import * as actions from ‘./actions’
import mutations from ‘./mutations’
import state from ‘./state’
Vue.use(Vuex)
// 注册上面引入的各大模块
const store = new Vuex.Store({
state,
getters,
actions,
mutations,
state
})
export default store// 导出 store 并在 main.js 中引用注册。
2、创建文件 state.js, 代码如下：
const state = {
count: 0,
countNumber: 10
}
export default state
3、创建文件 actions.js，代码如下：
export function count ({commit}, name) {
return commit(‘count’, name) // 触发 mutations 中的方法 && 传值
}
4、创建文件 getters.js。(我的理解是 store 的计算属性)
const getters = {
countNumber (state) {
state.countNumber+=2 // state 中 countNumber 字段发生变化，就会触发该方法
return state.countNumber
}
}
5、创建文件 mutations.js，代码如下：
const mutations = {
count (state, num) {// num 为 dispatch 传递的参数
state.count+=num
state.countNumber+=num
}
}
export default mutations
6、main.js 文件，需要引入 store：
import Vue from ‘vue’
import App from ‘./App’
import router from ‘./router’
import store from ‘./store/store.js’ // 导入文件 store
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: ‘#app’,
router,
store,
components: {App},
template: ‘<App/>’
})
7、文件 HelloWorld.vue 中的相关操作：
<template>
<div class=”hello”>
<div class=”addClsFather”>
<div class=”addCls” @click=”addFuc”>
Add
</div>
<div>
未使用 vuex：{{count}}
</div>
<div>
使用 vuex：{{this.$store.state.count}}
</div>
<div>
计算属性 getters：{{countNumber}} ¥
</div>
</div>
</div>
</template>
<script>
import {mapGetters} from ‘vuex’
export default {
name: ‘HelloWorld’,
data () {
return {
count: 0
}
},
computed: mapGetters([
‘countNumber’
]),
methods: {
addFuc() {
this.count++
this.$store.dispatch(‘count’, 5) // 触发 action 中的方法 && 传值
}
}
}
</script>
<!– Add “scoped” attribute to limit CSS to this component only –>
<style scoped>
.addClsFather {
margin: 50px 100px;
}
.addCls {
cursor: pointer;
width: 100px;
height: 30px;
line-height: 30px;
background-color: blue;
text-align: center;
color: #fff;
border-radius: 5px;
}
</style>
整体思路：
1、在文件 HelloWorld.vue 中，点击 ”Add” 按钮，通过 dispatch 触发 action 并传值；2、在 action 中，触发 mutations 中的方法并传值；3、通过 mutations 改变 state 中的字段值；4、对于使用了 getters 的字段，在 state 中的该字段改变后，会触发 getters，并进行相关的处理 (getters 可以理解为 state 的计算属性);5、state、getters 改变后，渲染到 DOM 中。注：在使用 getters 的字段，需要在相关关的(HelloWorld.vue) 页面引入 mapGetters 字段，并添加 computed 属性，如下(不使用 computed 属性，不会起作用)：
computed: mapGetters([
‘countNumber’
]),
以上是对 vuex 整体的摘要，下期分析 vuex 中的 mapState，mapGetters,mapMutations,mapActions
