vue 路由之vuex

vuex是什么?

主要是应用于vue.js中的管理数据状态的一个库。

通过创建集中的一个数据存储，共程序中所有的组件访问

	根组件
组件1（props）		组件2（event）
组件详情 （props）		添加组件（event）

普通组件之间的传值，父组件向子组件传值的是props属性传值，而子组件向父组件传值的主要的方法就是事件传值，可是

如果二级组件数据发生数据变化，而且实现数据的功用的话，这样就会很麻烦。数据之间就会绕一大圈。

vuex的使用

1.首先安装vuex $ npm install vuex --save;

2.其次在vue搭建的脚手架的src文件夹中创建一个新的文件夹store然后在创建一个store.js文件

怎么配置store.js文件

1. 如果要用vuex 首先要引入vuex ，再此之前我们还要引入vue

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

    

2. 文件引入后，我们需要用vue的use使用vuex  

   Vue.use(Vuex);

    

然后我们就可以实例化一个stroe。

export const store = new Vuex.Store({
    state:{// state 是一个对象，是用来存储数据用的
         products:[
            {name:"马云",price:"200"},
            {name:"马华腾",price:"100"},
            {name:"马冬梅",price:"50"},
            {name:"马容",price:"10"},
        ]
    }
});

//这样我们就把一个数据存储到vuex的stroe存储的state里面le、但是这样我们页面没有办法获取
//store里面的数据啊。 所有我们需要用到 export 把数据到处去

怎么使用store

1. 首先需要来到main.js里面。我们需要把vuex里面的store引入到main.js中，new Vue({})实例中使用。

   import Vue from 'vue'
   import App from './App'
   import router from './router'
   import {store} from './store/store'
   
   Vue.config.productionTip = false
   
   /* eslint-disable no-new */
   new Vue({
     el: '#app',
     router,
     store:store,
     components: { App },
     template: '<App/>'
   })

    

2. .如何拿到stroe里面的数据，这是我们就需要去组件中，因为我们已经把数据存储在里stroe里面了，所以这时组件里面就不在需要data{ }和props了（data是我们自准备的数据 props是父组件传递的数据，现在都可以存储啊在store中，所以可以不在需要），如果有props那么组件标签上绑定的属性也应该删除

3. 这时我们应该在子组件的expots default{} 中使用一个计算属性  computed来获取数据

   export default {
       computed:{
           products(){//这里的products方法的名字要和html中使用的数据的名字保持一致，因为这个是直接把 
                      //数据存储到里面 类似在data里面存储一个 products 的数据
               return this.$store.state.products;
           }
       }
   }

   4. 如果有这样一个场景，就是我们想改变在store里面获取的数据，怎么做。我本人遇到这个问题的时候第一反应就是，既然我们已经得到了数据，那么直接在在组件里面适应method或者computed；或者created的在或者mounted都是可以实现把数据改变的。但是如果多有的组件都需要数据发生改变，（例如商品的价格发生改变）。如果就一两个组件我们把方法复制一下也就可以了，加入有1000个组件呢， 我们不可能都复制过去。既然那不如直接在store，里面把数据处理了。当然vuex也是有这样一个方法的getter

   getters:{//获取数据
           //这里的saleProducts是getter里面的一个方法。
           saleProducts:(state)=>{//这里的state是store里面存储数据的对象
               //这里的saleProduct是自定义的存储数据的一个对象
               var  saleProducts = state.products.map((product)=>{
                   return {
                       name:"%%"+product.name+"%%",
                       price:product.price/2
                   }
               });
               //把存储数据的一个对象返回到saleProduct方法里面
               return saleProducts; 
           }
       },

   我们从上面的代码可以看到，最后的数据返回到getter里面去了，那么问题就coming，我们怎么在组件中使用数据呢

   export default {
       name:"product-list-two",
       computed:{
           saleProducts(){//saleProducts 组建中获取getter数据的方法
               return this.$store.getters.saleProducts //saleProducts是store中getter方法里面
   //改变数据的方法
           }
       }
   }