一.Vuex是什么？
什么是Vuex
介绍：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
理解：核心就是 store（仓库），仓库是用来干什么的？你就当它用来储存东西的。
在vue的组件化开发中，经常会遇到需要将当前组件的状态传递给其他组件。父子组件通信时，我们通常会采用 props + emit 这种方式。但当通信双方不是父子组件甚至压根不存在相关联系，或者一个状态需要共享给多个组件时，就会非常麻烦，数据也会相当难维护，这对我们开发来讲就很不友好。vuex 这个时候就很实用，不过在使用vuex之后也带来了更多的概念和框架，需慎重！
理解：核心就是 store（仓库），仓库是用来干什么的？你就当它用来储存东西的。
vuex.png
怎么下载vuex
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
- vue的传值只能传给有关联的人而我们有点时候需要传给没有关联的人 使用我们需要全局变量
- window 帮我们挂到window上 然后类名上state里面的值是
- 我们通过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模块化
在创建的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
},
},
}
处。
