（简）vuex

vuex

vuex是一个专门为vue.js设计的集中式状态管理架构。状态？我把它理解为在data中的属性需要共享给其他vue组件使用的部分，就叫做状态。简单的说就是data中需要共用的属性。

安装vuex

1.在控制命令中输入：npm install --save vuex （安装在当前项目下 vuex）

2.在main.js文件中引入vuex

案例解说

1、配置路由，新建个vuex.vue文件。
2、代码：

（1）声明vuex存储变量：

main.js文件

//声明vuex存储的变量
const store=new Vuex.Store({
  //vuex的配置
  state:{
    count:1
  }
})

vuex.vue文件

方法一：在html元素中用{{$store.state.count}}输出count 的值获取方式

	<div class="index"> 
		<h1>{{msg}}</h1>
        <h2>count:{{$store.state.count}}</h2>
    </div>

方法二：在计算属性中获取方式：

<h2>计算属性count:{{count}}</h2>

//js部分
<script>
export default {
    name:'vuex',
    data(){
        return {
            msg:'vuex页面'
        }
    },
    computed:{
        count:function(){
            return this.$store.state.count
        }
    }
}
</script>

运行结果

vuex页面
count:1
计算属性count:1

（2）mutations（修改数据）：可接收两个参数，第一个参数为当前的state，第二个参数为传递过来的参数值。实例如下：
main.js文件

//声明vuex存储的变量
const store=new Vuex.Store({
  //vuex的配置
  state:{
    count:1
  },
  //直接操作数据
  mutations:{
    add:function(state,num=0){
      state.count=state.count+num
    },
    reduce:function(state,num=0){
      state.count=state.count-num
    }
  }
})

$store.commit( )，Vuex提供了commit方法来修改状态。
vuex.vue文件

		<button @click="add">增加</button>
        <button @click="ruedce">减少</button>

//js部分
 methods:{
        add:function(){
            this.$store.commit('add',10)
        },
        ruedce:function(){
            this.$store.commit('reduce',10)
        }
    }

运行结果

vuex页面
count:21
计算属性count:21
增加

vuex页面
count:11
计算属性count:11
减少

（3）getters（筛选或处理数据）：getters从表面是获得的意思，可以把他看作在获取数据之前进行的一种再编辑,相当于对数据的一个过滤和加工。你可以把它看作store.js的计算属性。
main.js文件

//声明vuex存储的变量
const store=new Vuex.Store({
  //vuex的配置
  state:{
    count:1
  },
  //过滤或处理数据
  getters:{
    addDanwei:function(state){
      return state.count+'px'
    }
  }
})

vuex.vue文件

<h2>countDanwei:{{countDanwei}}</h2>

//js部分
computed:{
        countDanwei:function(){
            return this.$store.getters.addDanwei
        }
    }

运行结果

countDanwei:1px

（3）actions（异步处理）：actions和之前讲的Mutations功能基本一样，不同点是，actions是异步的改变state状态，而Mutations是同步改变状态。

main.js文件

//声明vuex存储的变量
const store=new Vuex.Store({
  //vuex的配置
  state:{
    count:1
  },
  //异步处理
  actions:{
    addActions:function(context){
      return new Promise(function(resolve,reject){
        setTimeout(() => {
        context.commit('add',100)
        resolve();
        }, 2000);
      })
     

    }
  }
})

vuex.vue文件

<button @click="addActions">Actions增加</button>

//js部分
methods:{
        addActions:function(){
            this.$store.dispatch('addActions',100).then(function(){
                console.log('执行结束')
            })

        }
    }

vuex页面
count:101
计算属性count:101
Actions增加

控制台打印Console
执行结束
webpack-internal:///./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/views/test/vuex.vue:38 

附加

全部案例代码

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import Vuex from 'vuex'

Vue.use(Vuex)
Vue.config.productionTip = false

//声明vuex存储的变量
const store=new Vuex.Store({
  //vuex的配置
  state:{
    count:1
  },
  //直接操作数据
  mutations:{
    add:function(state,num=0){
      state.count=state.count+num
    },
    reduce:function(state,num=0){
      state.count=state.count-num
    }
  },
  //过滤或处理数据
  getters:{
    addDanwei:function(state){
      return state.count+'px'
    }
  },
  //异步处理
  actions:{
    addActions:function(context){
      return new Promise(function(resolve,reject){
        setTimeout(() => {
        context.commit('add',100)
        resolve();
        }, 2000);
      })
     

    }
  }
})
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store:store, // 使用vuex
  components: { App },
  template: '<App/>'
})

vuex.vue文件

<template>
    <div class="index"> 
        <h1>{{msg}}</h1>
        <h2>count:{{$store.state.count}}</h2>
        <h2>计算属性count:{{count}}</h2>
        <h2>countDanwei:{{countDanwei}}</h2>
        <button @click="add">增加</button>
        <button @click="addActions">Actions增加</button>
        <button @click="ruedce">减少</button>
    </div>
</template>
<script>
export default {
    name:'vuex',
    data(){
        return {
            msg:'vuex页面'
        }
    },
    computed:{
        count:function(){
            return this.$store.state.count
        },
        countDanwei:function(){
            return this.$store.getters.addDanwei
        }
    },
    methods:{
        add:function(){
            this.$store.commit('add',10)
        },
        ruedce:function(){
            this.$store.commit('reduce',10)
        },
        addActions:function(){
            this.$store.dispatch('addActions',100).then(function(){
                console.log('执行结束')
            })

        }
    }
}
</script>