vuex的使用
一.vuex介绍
官方文档Vuex是一个专门为Vue.js应用程序开发的状态管理模式, 它采用集中式存储管理所有组件的公共状态, 并以相应的规则保证状态以一种可预测的方式发生变化.
上图中绿色虚线包裹起来的部分就是Vuex的核心, state中保存的就是公共状态, 改变state的唯一方式就是通过mutations进行更改
为什么要使用Vuex?
vue 各个组件之间传值是比较困难的，所以我们可以使用vuex来保存我们需要管理的状态值，值一旦被修改，所有引用该值的地方就会自动更新
二. 开始使用Vuex
步骤 1: 在src目录下新建一个目录store，在该目录下新建一个index.js文件，我们用来创建并导出vuex实例。index.js:
import Vue from 'vue'
import Vuex from 'vuex'
import myinfo from './myinfo'
Vue.use(Vuex)
// 创建vuex实列
const store = new Vuex.Store({
})
export default store
2.在main.js 文件下引入,再在vue实例全局引入store对象；
import store from './store' new Vue({ el: '#app', router: router, store: store, components: { App }, template: '<App/>', })
1.回到 scr/store/index.js 文件,继续 vuex, 实现一个完整的基础实列，每个属性注意看注释。
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const state = { // 要设置的全局访问的state对象 name: 'Tom', age: 18 } const getters = { // 实时监听state值的变化(最新状态) myName(state) { // 方法名随意,主要是来承载变化的name的值 return state.name } } const mutations = { // 一个对象，里面可以放改变state的初始值的方法 updateAge(state, age) { // 参数除了state之外还可以再传额外的参数(变量或对象); state.age = age } } const actions = { // 是个对象变量,可以包含任意异步操作，这里面的方法是用来异步触发mutations里面的方法 sureAge(context, age) { // 自定义触发mutations里函数的方法，context与store 实例具有相同方法和属性 context.commit('updateAge', age) } } export default new Vuex.Store({ state, getters, mutations, actions })
3.组件里面使用: src/components/demo/demo.vue
<template>
<div class="msg">
<span class="name">{{this.$store.state.name}}</span>
<span class="age">{{GetAge}}</span>
<span @click="fun1">年龄变为20</span>
</div>
</template>
<script>
export default{
computed: {
GetAge() {
return this.$store.state.age
}
},
methods: {
fun1() {
// this.$store.commit('updateAge', 20) // commit mutations
this.$store.dispatch('sureAge', 20) // dispatch actions 方法
}
}
}
</script>
大概展示效果 
三. 使用Vuex的moudels
1.vuex 的moudels用来做什么？
在Vuex中State使用是单一状态树结构，应该所有的状态都放在state里面，如果项目比较复杂，那state是一个很大的对象，store对象也将对变得非常大，难于管理。
module：可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。
2.module 结构和导出
const moduleA = { state: { ... }, mutations: { ... }, actions: { ... }, getters: { ... } } const moduleB = { state: { ... }, mutations: { ... }, actions: { ... }, getters: { ... } } export default new Vuex.Store({ modules: { moduleA , moduleB } })
3.列子: 将上文 scr/store/index.js 文件中 数据拿出来，在当前文件夹新建demo.js,放到里面
demo.js ： 需要在module中加一个命名空间namespaced: true属性，否则命名无法暴露出来
const state = { // 要设置的全局访问的state对象 name: 'Tom', age: 18 } const getters = { // 实时监听state值的变化(最新状态) myName(state) { // 方法名随意,主要是来承载变化的name的值 return state.name } } const mutations = { // 一个对象，里面可以放改变state的初始值的方法 updateAge(state, age) { // 参数除了state之外还可以再传额外的参数(变量或对象); state.age = age } } const actions = { // 是个对象变量,可以包含任意异步操作，这里面的方法是用来异步触发mutations里面的方法 sureAge(context, age) { // 自定义触发mutations里函数的方法，context与store 实例具有相同方法和属性 context.commit('updateAge', age) } } export default{ namespaced: true, state, getters, mutations, actions }
此时的src/store/index.js :
import Vue from 'vue' import Vuex from 'vuex' import demo from './demo' // 引入module Vue.use(Vuex) export default new Vuex.Store({ modules: { demo } })
4.使用: 加上demo命名空间
this.$store.state.demo.name
有了命名空间之后,辅助函数: mapState, mapGetters, mapActions 函数也都有了一个参数，用于限定命名空间，
第二个参数对象或数组中的属性，都映射到了当前命名空间中。
demo.vue :
<template>
<div class="msg">
<span class="name">{{GetName}}</span>
<span class="age">{{GetAge}}</span>
<span @click="fun1">年龄为20</span>
</div>
</template>
<script>
import {mapState, mapGetters, mapActions} from 'vuex'
export default{
created() {
console.log(this.$store.state.demo.name)
},
computed: {
// ...mapState({ // 1.通过 this.$store.state 直接获取参数, 需要指定命名空间 )
// GetName: state => state.demo.name,
// GetAge: state => state.demo.age
// }),
...mapState('demo', { // 或者命名空间
// GetName: state => state.name
}),
...mapGetters('demo', { // 2.通过getters获取参数 映射的方式
GetName: 'myName',
GetAge: 'myAge'
})
},
methods: { // 对象和数组中的sureAge 都是和demo中的参数一一对应。
...mapActions('demo', [ // demo 是指modules文件夹下的demo
'sureAge' // demo.js文件中的actions里的方法
]),
fun1() {
this.sureAge(20)
}
}
}
</script>
参考文档: 官方文档
