Vuex学习总结
官方文档
https://vuex.vuejs.org/zh/
概述
- 能够在vuex中集中管理共享的数据，易于开发和后期维护
- 能够高效地实现组件之间的数据共享，提高开发效率
- 存储在vuex中的数据都是响应式的，能够实时保持数据与页面的同步
什么样的数据适合存入
组件之间需要进行频繁共享的数据！
引入和使用
安装Vuex
npm install vuex --save
导包使用
import Vuex from 'vuex'
Vue.use(Vuex)
创建store对象
state是用来存储全局共享的数据的！
const store = new Vuex.Store({
state:{
data:''
}
})
挂载store对象
new Vue({
el:'#app',
render:h=>h(app),
router,
store
})
常见项目中使用方式（建议看这个）
1. 安装
npm install vuex --save
2.在src下创建store目录创建index.js文件
3.在index.js中进行实例化并且暴露出store
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
data:''
}
})
4.在main.js中进行挂载
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
Vuex的核心
State（共享数据仓库）
我们要将希望共享的数据放入State中进行存储
export default new Vuex.Store({
state: {
data:''
}
})
存储后如何进行获取
方式1（全部获取）
this.$store.state.你要获取的变量名
方式2（按需获取）
//在需要的组件中导入mapState
import {mapState} from 'vuex'
//在computed计算属性中进行映射
computed:{
...mapState(['你要获取的变量名'])
}
Mutation（修改State中的数据）
只能通过mutation变更Store数据，不可以直接操作 Store 中的数据。
通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有教据的变化。
注意：不能使用异步操作
export default new Vuex.Store({
state: {
data:''
}，
mutations:{
function名(state){
//处理
}
},
})
在组件中调用Mutation中的方法1
this.$store.commit('你要调用的函数名')
例如：
在app.vue中调用init方法
<template>
<div>
<div @click="initMethod"></div>
</div>
</template>
<script>
export default {
methods:{
initMethod(){
this.$store.commit('init')
}
}
}
</script>
<style lang="less" scoped></style>
调用同时传参
this.$store.commit('你调用的函数名',参数)
在组件中调用Mutation中的方法2
和state很像
<template>
<div>
<div @click="initMethod"></div>
</div>
</template>
<script>
//导入mapMutations
import {mapMutations} from 'vuex'
export default {
methods:{
...mapMutations(['你要调用的函数名']),
initMethod(){
this.你要调用的函数名()
}
}
}
</script>
<style lang="less" scoped></style>
调用同时传参
initMethod(){
this.你要调用的函数名(参数)
}
Action（处理异步操作）
export default new Vuex.Store({
state: {
data:''
}，
mutations:{
function名(state){
//处理
}
},
actions:{
//异步处理
}
})
例子（很简单推荐看例子）
在store.index.js中
export default new Vuex.Store({
state: {
data:''
}，
mutations:{
init(state){
state.data = 'hello world'
}
},
actions:{
handle(context){
context.commit('init')
}
}
})
在组件中进行调用
<template>
<div>
<div @click="initMethod">{{$store.state.data}}</div>
</div>
</template>
<script>
//导入mapMutations
import {mapMutations} from 'vuex'
export default {
methods:{
initMethod(){
this.$store.dispatch('handle')
}
}
}
</script>
<style lang="less" scoped></style>
简化在store中调用commit（推荐）
用{commit}直接代替context
export default new Vuex.Store({
state: {
data:''
}，
mutations:{
init(state){
state.data = 'hello world'
}
},
actions:{
handle({commit}){
commit('init')
}
}
})
其实action的调用也有两种方式但是我第二种从来用，就是和mutation的第二种一毛一样，所以就不写了！函数是mapActions
import {mapActions} from 'vuex'
Getter(对store的state种的数据加个)
Getter可以对Store 中已有的数据加工处理之后形成新的数据，类似Vue的计算属性。（原始数据不会改变，其实是一种硬链接形式）（硬链接就是复制一份数据放入内存中，形成新的内存空间，然后调用变量指向新的内存地址）
Store 中数据发生变化，Getter的数据也会跟着变化。
例子
export default new Vuex.Store({
state: {
data:''
}，
getters:{
newData:state=>{
let newer = state.data + 'hello world'
return newer
}
}
})
在组件中进行引用方法1
this.$store.getters.newData
引用方法2
import {mapGetters} from 'vue'
computed:{
...mapGetters(['newData'])
}
