一.了解Vuex
Vuex是一个专为Vue.js应用程序开发的状态管理模式+库(也就是vue的公共仓库,存储一些公共变量)。它采用集中式存储管理应用得所有组件的状态,Vuex 可以帮助我们管理共享状态,并以相应的规则保证状态以一种可预测的方式发生变化
单向数据流的概念
二.下载
npm install vuex@next --save
需要的地方引入
<script src="./node_modules/vue/dist/vue.js"></script>
<script src="./node_modules/vuex/dist/vuex.js"></script>
2.1创建vuex实例对象
store(仓库的意思)
如:const store = new Vuex.Store({
注:state有两种写法 一种对象形式,一种函数形式
1.state:{ 所有的变量都写在这里},
2.state(){
return{
所有的变量都写在这里
}
},
actions:{
函数里面会自动回调一个context
addCount(context){
context.commit("addCount")//执行mutations里面的addCount
}
},
mutations:{
里面为函数,函数的参数会自动回调一个state
如:addCount(state){
}
},
})
里面有三个主要参数
state、actions、mutations 、getters(相当于vue当中的computer)
2.2挂载store,挂载到vue实例中,挂载完毕之后 每一个组件上都会多出一个对象。$store
如:const app = new Vue({
el:"#app",
store,//挂载
data(){
return{
methods{
add(){
1.这里面不能用this.$store.state.变量,来直接修改变量
要使用this.$store.commit("addCount")来修改,它会自动执行mutations的方法
2.也可以通过this.$store.dispatch("addCount"),它会自动执行actions里面的方法
}
}
}
})
三、Module模块化
3.1,什么是模块化
Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割
(按着上面的写可能有点不清楚,模块这一部分我直接写一个代码小例子,在代码里面介绍,第二部分代码是对象展开运算符的代码)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
{{token}}
<button @click="updateToken">更新Token</button>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script src="./node_modules/vuex/dist/vuex.js"></script>
<script>
//第一步先创建一个模块
let user = {
// namespaced: true, 加入这个属性之后,vue里面的methods 必须设置成这样
//this.$store.commit("suser/etToken", "我是一个大笨蛋")
state: {
token: "我是一个大帅哥"
},
actions: {},
mutations: {
setToken(state, newToken) {
state.token = newToken
}
},
getters: {}
}
// 创建Vuex实例对象,并在modules里面注册
const store = new Vuex.Store({
// state mutations actions getters
modules: {
user
}
})
const app = new Vue({
el: "#app",
store,
computed: {
token() {
return this.$store.state.user.token
}
},
methods: {
updateToken() {
// user/setToken
this.$store.commit("setToken", "我是一个大笨蛋")
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
{{count}} --- {{info}}
<button @click="add">增加</button>
<button @click="sub">减少</button>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script src="./node_modules/vuex/dist/vuex.js"></script>
<script>
// 1.vuex实例对象
const store = new Vuex.Store({
// 1.state
//
// state() {
// return {
// count: 0
// }
// }
state: {
count: 0
},
// getters相当于组件中的comouted
getters: {
info(state) {
if(state.count > 20){
return "这个值大于20了"
}else {
return "这个值小于20了"
}
}
},
actions:{
//在actions里面的函数回调出来的是 context 是上下文 -- store仓库
addCount(context, step) {
context.commit("addCount", step)
},
subCount(context, step) {
context.commit("subCount", step)
}
},
//
mutations: {
// 函数
subCount(state, step) {
state.count-=step;
},
addCount(state, step) {
state.count+=step
}
}
})
const app = new Vue({
el: "#app",
// 2.挂载store。 挂载完毕之后 每一个组件上都会多出一个对象。$store
store,
data() {
return {
}
},
computed: {
// 必须这样
//
...Vuex.mapState({
// 左边是computed中的变量名称 右边是vuex中的变量名
count: 'count'
}),
...Vuex.mapGetters({
info: 'info'
})
},
methods: {
sub() {
this.$store.dispatch("subCount", 2)
},
add() {
// 提交 执行mutations里面的方法
this.$store.dispatch("addCount", 2)
}
}
})
</script>
</body>
</html>