Vue-vuex

1.什么是vuex

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

2.为什么使用vuex

 vuex就是把组件共享状态抽取出来以一个全局单例模式管理，把共享的数据函数放进vuex中，任何组件都可以进行使用。如果应用够简单，最好不要使用 Vuex。一个简单的store模式就足够所需了。但是，如果需要构建一个中大型单页应用，Vuex 将会成为自然而然的选择

3.基本用法

1.安装vuex

# npm 安装
npm install vuex

# yarn 安装
yarn add vuex

2.在src目录下创建一个store目录,在该目录下创建index.js文件,用于创建Store对象

3.在main.js 使用store对象

import store from './store';
app.use(store);

4.核心概念

vuex中一共有五个状态 State  Getter  Mutation   Action   Module

4.1 State

提供唯一的公共数据源，所有共享的数据统一放到store的state进行储存，相似与data

调用方式：

1.插值表达式{{$store.state.属性名}}

2.this.$store.state.全局数据名称

3.导入函数后直接使用：import { mapState } from "vuex";

定义方式：

const state = {
    count:0,
    user:{
        name:"cxy",
        age:18,
        sex:"男",
        address:"北京",
        phone:"12345678901"
    },
    phones:[{id:1,name:"苹果手机",price:8000,description:"即将开启双卡双待",num:1},
        {id:2,name:"华为手机",price:4500,description:"创新三个摄像头",num:1},
        {id:3,name:"小米手机",price:3500,description:"打游戏就是快",num:1},
        {id:4,name:"三星手机",price:7000,description:"手机中的爆炸机",num:1}],
    Msgs:[],
}

4.2 Mutation

  更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数

定义方式：

const mutations = {

    PhoneNumplus(state, payload) {
        const index = payload;
        state.phones[index].num++;
    },
    PhoneNummin(state, payload) {
        const index = payload;
        state.phones[index].num--;
    },
      // Mutation to delete a phone
    deletePhone(state, index) {
        state.phones.splice(index, 1);
    },
}

4.3  Action ——进行异步操作

  Action和Mutation相似，一般不用Mutation 异步操作，若要进行异步操作，使用Action

定义方式：

const actions = {

    add(context){
        context.commit('add')
    },
    min(context){
        context.commit('min')
    },
    lateradd(context){
        //延时3s
        setTimeout(() => {
            context.commit('lateradd')
        }, 3000);
    },
    changeAge(context){
        //发送请求，异步，计时器
        context.commit('age')
    }
}

4.4 Getter

  类似于vue中的computed，进行缓存，对于Store中的数据进行加工处理形成新的数据

定义方式：

const getters = {
    totalnum(state){
        let total = 0;
        state.phones.forEach(element => {
            total+=element.num
        });
        return total;
    },
    totalprice(state){
        let total = 0;
        state.phones.forEach(element => {
            total+=element.num*element.price
        });
        return total;
    }
}

4.5 Modules

  当遇见大型项目时，数据量大，store就会显得很臃肿为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割

const moduleA = {  

  state: () => ({  
  }),  

  mutations: {  
    }  

  },  

  actions: {  
  },