vue-16-vuex
1, 介绍
对 vue 进行状态管理的, 集中存储所有组件的所有状态, 解决多个组件共享数据的问题.
即, 所有组件可以拿到同样的状态, 组件间共享数据
2, 在之前进行数据交互, 需要有子父关系
parent:
<template>
<div>
parent: {{ info }}
<Child :title="msg" @sendMsg="handlerMsg"/>
</div>
</template>
<script>
import Child from "./Child";
export default {
name: "Parent",
components: {Child},
data() {
return {
msg: "hello son",
info: ""
}
},
methods: {
handlerMsg(info) {
this.info = info
}
}
}
</script>
<style scoped>
</style>
child:
<template>
<div>
Child:
receive from parent: {{ title }}
<div>
<button @click="sendMsg">emit </button>
</div>
</div>
</template>
<script>
export default {
name: "Child",
data() {
return {
}
},
props: {
title: {
type: String,
default: ""
}
},
methods: {
sendMsg() {
this.$emit("sendMsg", "the message from son ")
}
}
}
</script>
<style scoped>
</style>
3. vue的状态管理
view -> (dispath) Action -> (Commit)Mutations -> (Mutate) State -> View
注意: Actions不会必需品, 如果有异步操作才可能用到 Action, 否则不可以使用
4. 安装VueX
cnpm install --save vuex
5. 使用
// vuex
import Vuex from 'vuex'
Vue.use(Vuex)
6. store 是vuex 的核心
在src 下创建 store 文件夹, 并新建 index.js
写入store
// vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 创建vuex的store
const store = new Vuex.Store({
state: {
count: 5
},
// 更改store的状态
mutations: {
increment (state) {
state.count++
},
decrement (state) {
state.count--
}
},
// 有异步的时候， 需要action
actions: {
increment(context) {
context.commit('increment')
},
decrement (context) {
setTimeout(function () {
context.commit("decrement")
}, 10)
}
},
// 通过getter 进行数据获取
getters: {
getState(state) {
return state.count > 0 ? state.count : 0;
}
}
})
export default store
在 main.js 中导入, 并注入到 App中
import store from './store'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
// 注入 store
store,
router,
components: { App },
template: '<App/>',
})
7. 在vue 中进行引用
<template>
<div>
<div>
test...
{{ msg }}<br/>
</div>
<div>
获取值 --
{{ getCount }} <br/>
<button @click="add">inc</button>
<button @click="des">decri</button>
</div>
</div>
</template>
<script>
export default {
name: "outter",
data() {
return {
msg: "hello"
}
},
computed: {
// 避免编程负数， 需要通过方法进行获取
getCount() {
// return this.$store.state.count
return this.$store.getters.getState;
}
},
methods: {
add() {
this.$store.commit("increment")
},
des() {
// 使用 action中的异步方法
this.$store.dispatch("decrement")
},
}
}
</script>
<style scoped>
</style>