vuex

Vuex 可以帮助我们管理共享状态，类似于把某个页面的内容保存起来然后等待需要的页面再用。

如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex

 

store.js里面还有几个部分的内容

 state:{  }  定义数据

getters:{  }  放一些公用的方法   

mutations:{  }  处理state里面的数据    

actions:{  }  提交mutation,  他可以有任何的异步操作，第一个参数是 context，因为es6可以直接用{commit}      ----commit('mutations里面的一个函数')

 

 

例子：

假设定义了一个文件夹store里面有个gwc.js的文件，下面就是gwc.js的内容

import api from "../common/api"
const store ={
    state:{   

           id:0,

           goods:null,

          data:{buyNum:0,
                   ifIntegral:1,
                   order_message:"",

          },

  getter:{

     yinfu: (state, getters,rootState) => {  //公用的方法
            return NaN;
         }

   },

mutations:{

   "选择商品"(state,data){  state是必须的。data是调用时可能传过来的参数。把传过来的参数赋值给state.goods，就是上面state里面的goods值，就相当于谁调用这个就把谁的值存放在这个goods里面；
            state.goods=data;
        }

}

actions:{

increament({commit}，data){

      commit("选择商品",list);   //commit()调用当前页面的mutations里的函数。如果是this.$store.commit()在其他页面调用这个js里面的nutations。

}

 

 }

 

}

  

 

 

在页面中调用这个store时，、（一般的想用的store里面内容写法是this,$store.....）

import {mapGetters,mapState,mapMutations,mapActions} from "vuex"

computed:{
        ...mapState({   //这样下面的数据可以不用在data里面定义了。页面中直接用的就是store里面定义的那个

        id:s=>s.gwc.id,  //这里面的gwc是因为定义了一个文件夹store里面有个gwc.js的文件，所以s.gwc.data如果直接就是store.js就不用写gwc啦
        goods:s=>s.gwc.goods,

        data:s=>s.gwc.data,

     }），

   done(){

        return this.$store.yinfu    // 调用用getter里面的这个公共的方法

}，

methods:{

   editname(e){

    this.$store.commit("选择商品",e.target.value)   //调用mutations里面的函数,把e.target.value赋值给上面的state.goods。就相当于把这个e.target.value存储起来。

   } ，

addname(){

 this.$store.dispatch("选择商品");   //调用actions里面的函数。相当于调用这个

}

 }

}

 

 

还有个页面就是将这个store联系起来的，比如我填好了购物车的一些信息，比如颜色。尺码。数量。在这个页面把我们选好的这些数据要保存在store里面。然后再提交订单的时候读出来。

 

在这个选择商品的页面。

 this.$store.commit("选择商品", this.goods);  "选择商品""是store里面的mutations里面的一个函数，你这样写的话就是把这个this.goods放在store里面定义的goods里面，

在提交订单的页面。

 goods:s=>s.gwc.goods,就可以把刚才保存进来的数据取出来。页面就直接用{{goods}}。

 

简单来说就是

 

存数据：this.$store.commit("选择商品", this.goods); 

取数据  

import {mapGetters,mapState,mapMutations,mapActions} from "vuex"

computed:{
        ...mapState({   

        goods:s=>s.gwc.goods,

}）

使用的{{goods}}  这就是你刚才存起来的数据。虽然在不同的页面。但是可以共享。存进store里面就可以在其他任何的页面使用了。

 

 

 

总结：就相当于把一些公用的数据方法函数存放在一个文件里，然后在很多页面就可以直接引入这个文件使用里面的东西。