一. 什么是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扔了，如果尝试了本例，但是没有跑起来的小伙伴，可以一起交流下。