什么是Vuex

什么是Vuex

介绍：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

理解：核心就是 store（仓库），仓库是用来干什么的？你就当它用来储存东西的。

在vue的组件化开发中，经常会遇到需要将当前组件的状态传递给其他组件。父子组件通信时，我们通常会采用 props + emit 这种方式。但当通信双方不是父子组件甚至压根不存在相关联系，或者一个状态需要共享给多个组件时，就会非常麻烦，数据也会相当难维护，这对我们开发来讲就很不友好。vuex 这个时候就很实用，不过在使用vuex之后也带来了更多的概念和框架，需慎重！

使用教程

1、下载vuex,在vue项目终端任意输入一个指令即可

npm install vuex
cnpm install vuex

2、在src文件夹下创建一个store文件，在store文件夹中创建一个index.js

image.png

3、在创建好的index.js文件中(这里直接上代码) 这些就是vue的核心

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

4、创建好的vuex不能直接使用，我们要去main.js(全局)中配置

import 这里放入的是你vuex中导出的名字 from '这里写的是你的vuex路径'

import store from './store/index' 这个是我的vuex名字与路径

image.png

5、vuex中的核心介绍

(1) state 存储状态。也就是变量；

 state:{
      user:"",
      num:0,
      shopArr:[],
      obj:{}
  } 

在组件中使用

this.$store.state.属性名

(2) getters类似于计算属性可以对state中数据进行逻辑计算，类似于vue中的computed

  getters:{
        rgetShopCarLen(state){
            var sum = 0
            for(var i = 0;i

在组件中

this.$store.getters.方法名

(3) mutations直接操作state中的数据

  state:{
        shopCar:[]
  },
  mutations:{
        add(state,val){
            state.shopCar.push(val)
        }
  },

在组件中

this .$store.commit("方法名",参数)

(4) plugins是在vue中使用一些插件 列如可以使用vuex-localstorage
vuex-localstorage 要先进行下载 可以使用

npm install vuex-localstorage
cnpm install vuex-localstorage

在引入 vuex-localstorage

import createPersist from 'vuex-localstorage'

plugins:[
        createPersist({namespace:"namespace-for-state"})
],

(5) modules将vuex模块化
在创建的store文件夹中在创建一个js文件，这里我就叫user.js了

image.png

首先要在store中的index.js文件中引入刚创建好的js文件

import user from './user'

在index文件中写入

 modules:{
        user   es6写法，属性名和属性值相同情况下直接写入一个即可
    },

在去创建好的user.js中

export default {
    state:{
           userinfo ：""
    },
    mutations:{
           add2(state,val){
           state.userinfo = val
        },
    },
}

这里也可以写如我们的那几个核心对象，语法都是一样的
组件中传值

 this.$store.commit('add2',res) 
  this.$store.commit('方法名',值) 

组件中调用

this.$store.state.user.userinfo  
user代表的是在这个user模块里 
userinfo代表的是在user这个模块的state中有一个叫userinfo的变量

(6) actions 与 mutations 使用方法相同，不过他是执行异步操作的

    state:{
        key:""
    },
    mutations:{
        upkey(state,val){
            state.key = val
        }
    },
    actions:{
        upkey(state,val){
            setTimeout(()=>{
                state.commit('upkey', val);
            },1000)
        }
    }

在组件中使用传值

this.$store.dispatch('upkey',10)
this.$store.dispatch('方法名',值)

接收值

this.$store.state.key