Vuex基础

一.Vuex是什么

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化

通俗来说：

在大型，特大型，vue项目中做数据统一管理的，在vuex中存储的数据，每个组件都可以引用到
vuex中的数据发生变化，引用该数据的组件会自动更新，什么数据可以存储在vuex里面

二.安装

https://unpkg.com/vuex(opens new window)

在 Vue 之后引入 vuex 会进行自动安装：

<script src="/path/to/vue.js"></script>
<script src="/path/to/vuex.js"></script>

NPM

npm install vuex --save

在一个模块化的打包系统中通过 Vue.use() 来安装 Vuex：

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

安装 Vuex 之后，让我们来创建一个 store。创建过程直截了当——仅需要提供一个初始 state 对象和一些 mutation：

import Vue from 'vue'
import Vuex from 'vuex'
 
Vue.use(Vuex)
 
export default new Vuex.Store({
  state: {
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

state:定义vuex的数据地方

  state: {
    //定义vuex中数据
    cartNum:10,
  },

在组件访问数据的数据：$store.state.cartNum

 <p>购物车数量:{{ $store.state.cartNum }}</p>

mutations：定义修改数据的方法

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

在组件中访问mutations的方法：$store.commit('SET_CART_NUM', 100)

<button @click="$store.commit('SET_CART_NUM', 100)">修改为100</button>

actions：定义异步，延迟的方法

  actions: {
    //定义异步，网络延迟等方法
    //只能调用mutations,不能直接修改state
    getCartNum(context,data){
        //可以执行网络请求，等待延迟
      setTimeout(()=>{
        //等待4秒后执行mutations的SET_CART_NUM方法
        context.commit("SET_CART_NUM",data)
        //修改了cartNum的值为1
      },4000)
    }
  },

在组件中调用：$store.dispatch('getCartNum',33)

<button @click="$store.dispatch('getCartNum', 33)">延迟改变</button>

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

  getters: {
    //从现有数据计算新的数据 每个商品佣金是0.5元
    //fee佣金会跟随cartNum变化而变化
    fee:function(state){
      return state.cartNum*0.5
    }
  },

在组件中调用：@store.getters.fee

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

单词：

actions 动作：异步方法
mutations改变：是修改state数据的唯一方式
state：状态，数据
getters 获取器
moudule 模块
commit 提交
dispatch 触发