一.Vuex是什么？

什么是Vuex

介绍：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
理解：核心就是 store（仓库），仓库是用来干什么的？你就当它用来储存东西的。
在vue的组件化开发中，经常会遇到需要将当前组件的状态传递给其他组件。父子组件通信时，我们通常会采用 props + emit 这种方式。但当通信双方不是父子组件甚至压根不存在相关联系，或者一个状态需要共享给多个组件时，就会非常麻烦，数据也会相当难维护，这对我们开发来讲就很不友好。vuex 这个时候就很实用，不过在使用vuex之后也带来了更多的概念和框架，需慎重！
理解：核心就是 store（仓库），仓库是用来干什么的？你就当它用来储存东西的。

vuex.png

怎么下载vuex

vuex.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名字与路径

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

    npm install vuex 
  或者 cnpm install vuex 
  或者 yarn add vuex 

state 是什么？

 import Vue from 'vue'// 引入vue
import Vuex from 'vuex'  // 引入vuex
 
Vue.use(Vuex) 
 
const store = new Vuex.store({
 state:{
//存放的键值对就是所要管理的状态
username:'你好'
},
mutations:{
//es6语法，等同edit:funcion(){...}
user(state,val){
   state.username=val
}
}
})
 //取值 this.$store.state.user.username

1. vue的传值只能传给有关联的人而我们有点时候需要传给没有关联的人 使用我们需要全局变量
2. window 帮我们挂到window上 然后类名上state里面的值是
3. 我们通过state：存储状态（变量 ）的方式 把值存起来

Mutations 是什么？ 主要通过 Mutations改变 state里面的值

单个值提交时:

this.$store.commit('edit',15)

当需要多参提交时，推荐把他们放在一个对象中来提交:

  this.$store.commit('edit',{age:15,sex:'男'})

接收挂载的参数：

 mutations: {
edit(state,payload){
        state.name = 'jack'
        console.log(payload) // 15或{age:15,sex:'男'}
    }

},

什么是plugins 全局设置样式

//安装 npm install vuex-localstorage'
 //引入vue 
 import createPersist from 'vuex-localstorage'
  plugins: [
createPersist({
  namespace: 'namespace-for-state',
})
  ],

//设置全局

什么是modules 可以干什么

一、什么是module？
背景：在Vue中State使用是单一状态树结构，应该的所有的状态都放在state里面，如果项目比较复杂，那state是一个很大的对象，store对象也将对变得非常大，难于管理。
可以让他更好管

  import Vue from 'vue'
import Vuex from 'vuex'
// import create from 'vue-localstorage'
Vue.use(Vuex)
// 创建vues构造器
//import 'es6-promise/auto'
// 引入vue 的localstorage
import user from "./user"
import createPersist from 'vuex-localstorage'
export default new Vuex.Store({
state: {
n: "",
arr: [],
name: ""
},
mutations: {
increment(state, val) {
  state.n = val
},
arr2(state, val) {
  state.arr = val
}

},
plugins: [
 createPersist({
  namespace: 'namespace-for-state',
})
],
modules: {
user
  //设置自己
//引入的孩子 user
 }

})

modules里面 引入的孩子 user
下面是user的样式

export default {//导出
state: {
username: "",
usernumber: ""
},
mutations: {
user(state, val) {
  state.username = val
},
},
 }

什么是Action

Action 类似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接变更状态。：
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

modules将vuex模块化

vuex.png

在创建的store文件夹中在创建一个js文件，这里我就叫user.js了

首先要在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
        },
    },
}

处。