vuex第一步挖坑
一、使用vuex
https://unpkg.com/vuex
NPM
npm i vuex -S
// 调用
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({})
Vuex依赖Promise。如果你支持的浏览器并没有实现Promise（比如IE），那么你可以使用一个polyfill的库，例如es6-promise
Promise的CDN
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>
NPM
npm install es6-promise --save
vuex里面有四个属性，state,getters,mutations,actions，实例化的store必须注入根实例中才能生效
二、state
state相当于一个数据存储结构，项目所有需要交互的数据都需要在state里面声明
state会暴露一个$store.state对象，然后可以通过$store.state对象调用state里面的属性，如果是子组件，则可以是this.$store.state
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://unpkg.com/vuex"></script>
</head>
<body lang="en">
<div id="app">
{{title}}
<!-- 使用store里面的state值，在vuex实例页面，则store.state.pr即可，其余则需要this.$store -->
<p>{{this.$store.state.num}}</p> // 1
<p>{{$store.state.str}}</p> // 测试vuex的state属性
<p>{{$store.state.test}}</p> // 为什么store.state...不行
</div>
</body>
</html>
<script>
// 声明vuex
let store = new Vuex.Store({
state: {
num: 1,
str: '测试vuex的state属性',
test: '为什么store.state...不行'
}
})
let app = new Vue({
el: '#app',
store, // 要使用vuex,需要在vue实例里面注册一下
data: {
title: 'vuex的初步使用'
},
mounted () {
console.log(this.$store.state.num)
}
})
</script>
三、getters
getters并没有什么实际上意义，就是一个存粹的函数，想当于vue里面的computed计算属性，可以重新计算定义state里面属性的值并返回
getters会暴露一个$store.getters对象，可以通过这个对象调用里面的函数属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://unpkg.com/vuex"></script>
</head>
<body lang="en">
<div id="app">
<h1>{{title}}</h1>
<son></son> // true
<p>{{$store.getters.newNum}}</p> // true
<p>{{$store.getters.newStr}}</p> // 你好,我是不会前端
<p>{{$store.getters.newMessage}}</p> // message原内容为"你好吗?",现在改变为:我很好
</div>
</body>
</html>
<script>
let son = {
template: `<div>{{$store.getters.newNum}}</div>`,
}
let store = new Vuex.Store({
state: {
num: 1,
str: '你好',
message: '你好吗?'
},
getters: {
newNum: (state) => {
if (state.num === 1) {
return true
} else if (state.num === 0) {
return false
}
},
newStr: (state) => {
if (state.str === '你好') {
return state.str + ',我是不会前端'
}
},
newMessage: (state) => {
if (state.message === '你好吗?') {
state.message = '我很好'
return 'message原内容为"你好吗?",现在改变为:' + state.message
}
}
}
})
let app = new Vue({
el: '#app',
store,
components: {
son
},
data: {
title: '测试getters'
}
})
</script>
四、mutations
修改vuex中state的属性值的唯一方法就是通过commit提交mutations，getters只是个纯函数，只能返回一个新数据，而且调用的是$store.getters的方法，并没有改变state的值
mutations里面存放的就是回调函数，这些回调函数有参数，第一个就是我们要修改数据对象state，之后的参数就是我们自己自定义传的（官方称为：载荷(payload)），建议使用对象，如果是一个值，就直接传
mutations会暴露出一个$store.commit()方法，这个方法里面可以传入参数，第一个就是要执行的回调函数的名字，第二个就是我们要传入的参数，既然是方法，就需要绑定在事件上触发
Tips 建议mutations的函数方法名全部大写链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuex"></script>
</head>
<body>
<div id="app">
<h1>{{title}}</h1>
<p v-show="$store.state.show">是否显示隐藏</p>
<!-- 通过点击事件提交mutations里面的方法，SET_SHOW就是方法名 -->
<button @click="$store.commit('SET_SHOW')">点击控制</button>
</div>
</body>
</html>
<script>
// 声明vuex组件
let store = new Vuex.Store({
state: {
num: 1,
show: ''
},
getters: {
newNum: function (state) {
if (state.num === 1) {
return true
} else {
return false
}
}
},
mutations: {
// 声明一个函数方法
SET_SHOW (state) {
state.num = state.num ? 0 : 1
state.show = state.num ? false : true
console.log(state.show)
}
}
})
let app = new Vue({
el: '#app',
store,
data: {
title: '测试mutations方法'
}
})
</script>
五、actions
mutations能够执行同步方法，但是不能执行异步，vuex建议所有异步操作都在actions里面执行，actions里面其实也可以调用执行mutations里面的函数方法
mutations是通过commit提交mutations，直接变更了state内容，而actions则是提交mutations
actions里面的函数接受一个参数，这个参数类似于store实例，里面也有state，getters，mutations，actions等对象属性，也就意味着可以通过context.state、context.getters等方式来调用获取store实例里面的state,getters等
通过代码我们可以看出其实就相当于把mutations的commit方法放到了actions的context对象里面了，执行的还是一样的mutations操作，只不过actions能执行异步操作
actions会暴露出一个$store.dispatch()方法来触发actions里面的函数，这个方法可以接受参数，第一个参数就是需要调用执行的actions的函数名，第二个参数为自定义，建议为对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuex"></script>
</head>
<body>
<div id="app">
<h1>{{title}}</h1>
<p v-show="$store.state.show">点击显示内容</p>
<button @click="$store.dispatch('set_show')">点击控制</button>
</div>
</body>
</html>
<script>
let store = new Vuex.Store({
state: {
num: 1,
show: '',
test: ''
},
getters: {
newNum: state => {
if (state.num === 1) {
return state.show = true
} else {
return state.show = false
}
}
},
mutations: {
SET_SHOW (state) {
if (state.num === 1) {
state.num = 0
return state.show = true
} else {
state.num = 1
return state.show = false
}
}
},
actions: {
set_show (context) {
// 一秒后显示
setTimeout(function () {
context.commit('SET_SHOW')
console.log(context.state.show)
}, 1000)
}
}
})
let app = new Vue({
el: '#app',
store,
data: {
title: '测试actions方法'
}
})
</script>
