vuex初级知识点

vuex

特点

在大型特大型，vue项目中做数据管理的，非大项目不推荐用，
如果一个数据，需要在多个组件中重复使用，可以把数据放在vuex的store中

文件编译位置

编译index.js文件

（1）state

定义vuex数据的方法

    //定义一个购物车物品数量
    cartNum:10
  }
  //下面为App.vue文件中的内容
   <router-link to="/cart" class="link acart">购物车{{$store.state.cartNum}}</router-link>

在组件中用 $store.state.cartNum调用
注意：store.state为固定写法 cartNum为自定义变量
效果如下：定义的数据会在页面显示出来

（2）motation

定义修改数据的方法

 mutations: {
 //修改state数据必须在mutations中的方法
 //方法名字建议大写
SET_CART_NUM(state,data){
state.cartNum=data
}

下面在组件中调用

<p>购物车数量：{{$store.state.cartNum}}</p>//在购物车页面中显示数量
 <button @click="$store.commit(`SET_CART_NUM`,100)">修改为100</button>
  <button @click="$store.commit(`SET_CART_NUM`,$store.state.cartNum+1)">+1</button>
  //也可以让数量每次加1

（3）actions

定义异步，网路延迟等方法

 actions: {
    //定义异步，网络延迟等方法
    //只能调用mutations 不能修改state
    getCartNum(context,data){
      setTimeout(() => {
        context.commit("SET_CART_NUM",data)
      }, 3000);
    }
  },

调用

<button @click="$store.dispatch('getCartNum',25)">延迟改变25</button>
//延迟3秒后购物车物品数量变为25

注意：dispatch 为固定写法

（4）getters

从现有state数据计算出新的数据

getters: {
  //从现有数据计算新的数据  假设每个商品佣金0.5
  fee:function(state){
   return state.cartNum*0.5
  }
},

调用

<p>佣金为：{{$store.getters.fee}}</p>

总结：以上所有定义的数据在页面内都是动态渲染的，会根据改变一处其他地方也会跟着改变