咱们知道，vue项目当中的父子组件的交互是单通道传递，父组件通过props向子组件传递参数，而在子组件当中不不能直接修改接收的参数，而是需要通过自定义事件的方式，例如：

这样是不是很麻烦？如果用vuex就会变的非常简单！ 

1、首先用npm包管理工具，安装vuex

//因为这个包在生产环境中也要使用，所以在这里一定要加上 –savenpm install vuex --save

2、然后在main.js当中引入vuex

import vuex from 'vuex'

3、使用vuex

Vue.use(vuex);//使用vuex//创建一个常量对象const state={    isRed:false}var store = new vuex.Store({//创建vuex中的store对象    state})

4、随后在实例化Vue对象时，加入store对象：

new Vue({    el: '#app',    router,    store,//使用store    template: '
     ',    components: { App }})

5、最后再将最初的示例修改为：

　　到目前为止，这个示例就被简化了很多？ 

前面将代码都写到了main.js中了，为了日后便于维护，更好的管理vuex，最好对vuex进行一些调整。 

1、在src文件夹根目录创建vuex文件夹，然后在该文件夹内创建store.js文件。然后在文件内引入vue和vuex。

import Vue from 'vue';import Vuex from 'vuex';

　　2、然后使用Vuex

Vue.use(Vuex );//使用Vuex //创建一个常量对象const state={    isRed:false}//让外部引用vuexexport default new Vuex.Store({//创建vuex中的store对象    state})

　　3、然后将main.js之前写入的与vuex相关的内容清除掉，引入刚刚创建的store.js文件

import store from '@/vuex/store'

　　4、在实例化Vue对象时，加入引入的store对象：

new Vue({    el: '#app',    router,    store,//使用store    template: '
     ',    components: { App }})

　　5、npm run dev，正常运行！ 

6、未完，待续！ 

  哈哈哈本来打算七篇放一起的太懒了。算了。要就去看吧

 

1、首先通过vue-cli生成一个名字叫做demo的项目

vue init webpack demo

• 1

2、项目搭建完成以后，安装vuex

npm  install vuex --save

• 1

3、在src目录下创建vuex文件夹，然后在该文件夹下创建一个名字叫做store的js文件 

 

4、在store.js中写入以下代码：

import Vue from 'vue';//引用vueimport Vuex from 'vuex';//引用vuexVue.use(Vuex);//使用vuexconst state={    nodeVoteCount:0,//node的初始票数    vueVoteCount:0,//vue的初始票数}export default new Vuex.Store({
   ////暴露Store对象    state})

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

5、在main.js当中引入在store.js文件当中创建的store对象，并在Vue实例中添加

import Vue from 'vue'import App from './App'import router from './router'import store from './vuex/store'//导入store.jsVue.config.productionTip = falsenew Vue({    el: '#app',    router,    store,//添加store    components: { App },    template: '
    '})

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

6、修改App.vue为：

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23

7、到现在为你，初始的票数已经被咱们获取到了。 

不过有心的你应该已经发现了：当获得vuex状态值的时候代码好长，好啰嗦，好不方便！不过没关系，vuex为伟大的你提供了一种十分简便方法。 

- 首先在App.vue当中的script内引入vuex

import vuex from "vuex";

• 1

• 然后在computed计算属性里写如下代码：

computed:vuex.mapState(["vueVoteCount","nodeVoteCount"])或computed:vuex.mapState({//mapState方法最终返回的是一个state对象。    vueVoteCount:state=>state.vueVoteCount,    nodeVoteCount:(state)=>state.nodeVoteCount})

• 1
• 2
• 3
• 4
• 5
• 6

• 再然后修改App.vue的template为：

    
      
           
     
      
总票数：{
    {
    nodeVoteCount+vueVoteCount}}
     
      
     
          
                
      
如何通过node.js对数据进行MD5加密
          
      票数:{
    {
    nodeVoteCount}}      
     
      
     
      
     
          
                
      
真正掌握vuex的使用方法（一）
          
      票数：{
    {
    vueVoteCount}}      
     
  
    

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15

经过上面的代码调整以后，你会发现调取vuex的状态值简便了不少。 

不过设置mapState也要花费一些精力。 

那么咱们再通过ES6的知识再将上面的JS部分进行一番优化。 

- 首先咱们将引入的vuex那部分修改为：

import {mapState} from "vuex";//通过ES6的对象解构赋值

• 1

• 然后在使用mapSate的时候，咱们就可以省略一级对象（vuex）,即computed修改为：

computed:mapState(["vueVoteCount","nodeVoteCount"])或computed:mapState({    vueVoteCount:state=>state.vueVoteCount,    nodeVoteCount:(state)=>state.nodeVoteCount})

• 1
• 2
• 3
• 4
• 5
• 6

• 现在有的小伙伴是不是在想，以后如果我要在这里写自己的计算属性怎么办？怎么办？咱们可以通过对象合并的方法去实现。 
  通过Object.assign()合并对象：

//Object.assign()方法的第一个参数为目标对象，其余参数为源对象。//通过该方法可以将所有源对象的值copy到目标对象。//该方法的返回值即为这个目标对象computed:Object.assign(mapState(["vueVoteCount","nodeVoteCount"]),{    //自己的计算属性可以在这里面写哦}),//或computed:Object.assign(mapState({    vueVoteCount:state=>state.vueVoteCount,    nodeVoteCount:(state)=>state.nodeVoteCount}),{   //自己的计算属性可以在这里面写哦})

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

当然也可以用…(扩展运算符）来合并对象

computed:{    ...mapState(["vueVoteCount","nodeVoteCount"]),    ...{        //自己的计算属性可以在这里面写哦    }}//或computed:{    ...mapState({        vueVoteCount:state=>state.vueVoteCount,        nodeVoteCount:(state)=>state.nodeVoteCount    }),    ...{        //自己的计算属性可以在这里面写哦       }}