vuex使用教程

序言：今天咱们简单说一下vuex的使用，vuex是什么呢，至关于react的redux，若是项目使用数据过多的话，直接管理是很是不方便的，那么采用vuex，那些繁琐的问题就迎刃而解了，首先咱们先看看官方对vuex的说明：

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

1、说白了就是vue的状态管理，你只须要每次动态的改变这些状态就行，数据就会自动渲染，从第一步安装开始
一、安装vue项目

vue init webpack projectName

二、进入项目目录

cd projectName

三、安装vuex

npm i vuex --save

四、项目启动

npm run dev/npm start

ps:若是npm安装慢的话，建议使用淘宝镜像:cnpm
安装淘宝镜像：

npm i -g cnpm --registry=https://registry.npm.taobao.org

2、vuex的引入
项目安装成功之后，初始的文件目录格式都是同样的，像我这样

而后咱们简单的使用，在main.js中引入vuex

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

记得必定要挂载使用它，就是这一句：Vue.use(Vuex)
3、在main.js中加入

var store = new vuex.Store({//store对象
    state:{    
        count:0  
    }
})

4、把刚才的store对象实例化到Vue中

new Vue({
    el: '#app',
    router,
    store,//加入store对象
    template: '<App/>',
    components: { App }
})

完成这一步咱们就可使用了，一个简单的vuex的state就能够了，怎么用呢

<div id="hello">
    <p>{{$store.state.count}}</p>
</div>

5、很明显，刚才只是简单的一例子，若是你须要作大型的项目，不可能把store对象写在main.js里，这样是很是不方便管理的，因此咱们须要在src下新建一个文件夹store专门存放store对象，而后咱们新建一个文件index.js

//index.js
import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex);
export default new vuex.Store({
    state:{        
        count:0    
    }
})

相应的main,js就须要作修改了

import store from './store/index' 
new Vue({  
    el: '#app',
    router,
    store,//这个store是刚才建立的index文件引入的
    template: '<App/>',
    components: { App }
})

这样作就是为了把store对象分离出去，方便管理，可是你会发现这个store对象是全局的全部组件均可以使用，若是咱们的组件多了，数据多了，所有堆放在一块儿，是否是特别臃肿，因此如今咱们就该使用modules
首页咱们新建一个js文件存放一个组件可能用到的store对象，好比我新建heade.js,在这里咱们不须要引用vuex了，只须要默认export default就好了
//heade.js

export default {
    state: {
        count: 0    
    }
}

而后咱们把在index.js中使用modules　

import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex); 
import HeadeStore from './heade';//引入刚才的heade.js export default new vuex.Store({
    modules: {
        Heade: HeadeStore    
    }
})

如今咱们管理起来就方便多了，好比还有其余的呢咱们放在modules下就能够了，好比，咱们除了heade.js里管理的是一个组件的store对象，咱们还有一个content.js来管理另一个组件的store对象，那么咱们在store文件夹下载新建一个content.js,和heade.js同样，只须要默认输出就能够了
//content.js

export default {
    state: {
        cont: '这是content内容'    
    }
}

而后咱们在index.js中引入挂在modules下就能够啦

import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex); 
import HeadeStore './heade';//引入刚才的heade.js
import ContentStore from './content' //引入content.js 
export default new vuex.Store({
    modules: {        
        Heade: HeadeStore,
        Content: ContentStore    
    }
})

这样是否是方便多了，可是怎么用呢，很简单，如今须要经过modules去找他，以前的方法：$store.state.count改为$store.state.Heade.count就好了，很明显这是找到了heade.js下的count值，那么找content.js下cont的值呢？同样的，换一下modules的名就行$store.state.Content.cont

//heade组件<p>{{$store.state.Heade.count}}</p>//content组件<p>{{$store.state.Content.cont}}</p>

输出结果分贝为：0，这是content内容　
6、那么接下来你以为问题解决了吗，难道大家的项目组件全部的状态都用这一个，那若是我须要动态的改变他的状态呢，怎么办？没事，这不mutations来了吗，问题就好多了,怎么用呢，这是干吗的呢，说白了就是动态的改变state的值完成页面的同步渲染，看看用法吧，直接在state对象后面加就好了

//heade.js
export default {
    state: {
        count: 0    
    },    
    mutations: {
        Count (state) {         
            state.count =1      
        }    
    }
}

解释一下，mutations对象是函数，默认传值是state，也就是上面的state，因此能够直接操做state.count
怎么用呢，很简单，好比页面有一个按钮，点击改变state的count

<a href="javascript:;" @click="$store.commit('Count ')">click</a>

此时页面渲染为1
commit('Count ')调用mutations的固定方法，参数为mutations的方法名，固然commit不止传一个参数，也能够传不少，好比：

<a href="javascript:;" @click="$store.commit('Count',10)">click</a>

能够在heade.js的mutations下Count方法接收它

//heade.js
export default {
    state: {
        count: 0
    },    
    mutations: {
        Count (state,n) {
            state.count =state.count+n     
        }    
    }
}

此时输出结果为10

到这一步为止，咱们已经能够正常的动态的修改state来渲染在页面了，你会发现，mutations是同步的，只要你在一个组件执行mutations的方法了，那全部的组件只要用到mutations的方法都会同步进行改变，这并非咱们想要的结果，因此，actions来解决问题了，写法同样

//heade.js
export default {
    state: {
        count: 0
    },    
    mutations: {
        Count (state,n) {
            state.count =state.count+n
        }    
    },    
    actions: {
        Acount (context) {
            context.commit('Count ')
        }    
    }
}

接着解释，actions和mutations的写法同样，都是函数，可是actions的默认参数是context，context.commit('Count ')的意思是触发mutations下的Count函数，那么怎么触发actions的函数呢，方法就是

<a href="javascript:;" @click="$store.dispatch('Acount')">click</a>

dispatch方法是官方固定触发actions下函数的方法
官方推荐 , 将异步操做放在 action 中

还有一个属性我以为也没有必要说了，getters,解释一下它的做用
getters 和 vue 中的 computed 相似 , 都是用来计算 state 而后生成新的数据 ( 状态 ) 的。好比咱们heade.js的state有一个值show:false getters就是计算与false相反的，可是它计算的值是不能直接修改的， 须要对应的 state 发生变化才能修改。　

//heade.js
export default {
    state: {
        count: 0,
        show: false    
    },    
    mutations: {
        Count (state,n) {
            state.count =state.count+n      
        }    
    },    
    actions: {
        Acount (context) {
            context.commit('Count ')
        }    
    },    
    getters:{
        not_show(state){
            return !state.show;
        }    
    }
}

它也是默认接受state
最后一点就是为了方便操做开发，通常状况$store.state.Heade.show，$store.state.show写起来不是很方便，那么vuex的辅助函数mapState、mapGetters、mapActions就能够解决这个问题，办stroe对象那个映射到this

<template> 
    <div class="Heade">    
        <p>{{msg}}</P> 
    </div>
</template> 
<script>
import {mapState} from 'vuex';
export default {
    name: 'Heade',  
    data () {   
        return {
            msg: ''    
        }  
    },
    computed:{    //这里的三点叫作 : 扩展运算符    
        ...mapState([
            count:state=>state.Heade.count    
        ]),  
    },  
    created () {
        this.msg = this.count  
    }
}
</script>

如今咱们就直接能够用this.count去找到state下count的值了，created方法是页面刚载入加载完事执行的方法，完后动态的赋值给msg，mapState通常放在computed计算属性中，mapActions通常放在methods下，
到这一步为止vuex的学习使用就结束了，你能够尽情的去操做数据了，也不用担忧会混乱，若是您连我写的文档都看不懂，那你不适合学习vue，放弃吧！ 哈哈哈哈

以上教程所有原创，手打，不免有错误的地方，请各位指正！
若是想一块儿学习,请添加我的微信群一块儿学习：lining88662200
demo地址
vuex官网