一. 什么是vuex？
Vuex是一个专为了vue.js 应用程序开发的状态管理模式
二.为什么要用vuex?
构建一个大型单页面应用程序时，Vuex可以更好的帮我们的组件外部更好的统一管理状态
类似服务端的session（单纯的比较）
三.Vuex的核心观念
State
是唯一的数据源
单一状态树
Getters
通过Getters可以派生一些新的状态
通过Getters 操作只需要done的属性
Mutations
更改vuex的store中的状态的唯一方法提交Mutations
调用
Actions
Action提交的是mutation,而不是直接变更状态
Action可以包含任意异步操作
Modules
面对复杂的应用程序,当管理的状态比较多时,我们需要将Vuex的store对象分割成模块(Modules)
四.Vuex状态管理
因为是初次写文章以及是后端开发人员,所以能明白,因为和后端思维是通的,但是无法深刻写出对其的完整理解,见谅
五.使用方法
1.安装
`npm install Vuex --save`
2.引入项目
2.1在src目录下新建Store.js ,编写如下代码
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state:{
count:0
},
mutations:{
increment:state => state.count ++,
decrement:state => state.count --,
}
})2.2在main.js 引入该js
import Store from '../src/store/store'
2.3 挂载Store
new Vue({
el: '#app',
Store,
router,
components: { App },
template: '<App/>'
})2.4 新建Test.vue 并建立对应路由 编写如下代码<template>
<div>
{{ count }}
<p>
<button @click="incre">+</button>
</p>
</div>
</template>
<script>
export default {
methods:{
incre(){
this.$store.commit('increment')
},
},
computed:{
count(){
console.log(this.$store.state.count);
return this.$store.state.count
},
}
}
</script>
<style scoped>
</style>
运行结果
后记
通过该vuex示例，了解vuex的常用配置及方法调用。希望对不怎么熟悉vuex的同学快速上手vuex项目有点帮助。
因为没太多东西，我自己也是刚接触，本例就不往GitHub扔了，如果尝试了本例，但是没有跑起来的小伙伴，可以一起交流下。