什么是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<state.shopCar.length;i++){
sum+=state.shopCar[i]
}
return sum
}
}
在组件中
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
