Vuex的安装及使用

Vuex的安装及使用

1.下面先来介绍一下什么是vuex,想必好多人对vuex都不太了解。

官方解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

我的理解是：可以把它理解为一个全局变量

例如： 模块a / 模块b。

我想 模块b获取模块a的数据。

方法1: 用组件之间通讯。这样写很麻烦，并且写着写着，估计自己都不知道这是啥了，很容易写晕。

方法2: 我们定义 全局变量。模块a的数据 赋值给全局变量 c。然后 模块b 获取x。这样我们就很容易获取到数据

 

我们把模块a 的数据叫 state。全局变量叫store。模块b 叫data

Getter 是一个纯函数，用于接收state 参数。返回你需要取的值

mutation  是对  state 进行修改

action  处理数据，对处理的数据 返回给 mutation 从而对 state 进行修改。

如下：是一个数据流图，可以清晰的理解他们之间的关系

2.什么时候使用vuex

就是组件之间传值，自己都不知道该怎么传值的时候，去使用它，会很好的解决你的烦恼。

3.下面就来具体介绍一下它的使用方法

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.在main.js文件中引入store.js

import store from './store.js'
//实例化
new Vue({
  router,
  store,
  axios,
  el: '#app',
  render: h => h(App)
})

3.接下来，就可以在其他文件中调用

新建的demo.vue文件

<template>
       <div>
               999
               {{ count }}
               <p>
                <button @click="increment">+</button>
                <button @click="decrement">-</button>
              </p>     
       </div>
</template>
<script type="text/javascript">
    export default{
        name:'sildebar',
        data(){
            return{

            }
        },
        methods:{
            increment(){
              this.$store.commit('increment')
            },
            decrement(){
              this.$store.commit('decrement')
            }
        },
        computed:{
            count(){
                return this.$store.state.count
            },
        }


    }

</script>

4.实现效果如下：可以通过点击图上的+，- 按钮来改变下面的值

4.vuex 核心仓库是store（state,mutations,actions,getter,modules）。

1.  action 提交mutation,而不是直接更改状态
2. action 可以包括异步操作，mutation只能同步
3. modules  将store分割成模块（modules）,每个模块拥有自己的(state,mutations,actions,getter);方便维护
4. store 改变状态时通过 （commit） mutations

action  可异步操作

 首先要介绍一下 axios。从2.0以后 不再更新 vue-resource 。官网推荐使用axios。

安装

cnpm install axios -S

在main.js文件引入

import axios from 'axios'

使用

Vue.prototype.$ajax = axios
//在组件中这样使用
this.$http.get()
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});