微信小程序：vuex在mpvue中的实践

每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：

• Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
• 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

Vuex状态管理

安装配置

通过npm命令安装：

npm install vuex --save

引入vuex:

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex) // 安装`Vuex`

使用实例

├── store ：Vuex模块
│   ├── index.js
│   ├── mutation-types.js // 类型
│   ├── mutations.js // 修改状态的唯一途径
│   └── state.js // 存储状态

State状态

以经纬度为例：

const state = {
	latitude: 0, // 初始值设置为 0，这里可以设置某个地点为初始值。
	longitude: 0
}
export default state

mutation

更改Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。

会多次使用到事件类型，单独定义成常量放在mutation-type文件中。

// mutation-type.js
const SET_LATITUDE = 'SET_LATITUDE'
const SET_LONGITUDE = 'SET_LONGITUDE'

mutations方法定义：

// mutations.js
import * as types from './mutation-types' // <---- 引入类型常量

const mutations = {
	[types.SET_LATITUDE] (state, latitude) {
		state.latitude = latitude
	},
	[types.SET_LONGITUDE] (state, longitude) {
		state.longitude = longitude
	}
}
export default mutations

index 文件

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state' // 引入
import mutations from './mutations' // 引入
import createLogger from 'vuex/dist/logger' // <---- 打印Log信息

Vue.use(Vuex) // 安装Vuex

const debug = process.env.NODE_ENV !== 'production' // 是生产环境还是开发环境

export default new Vuex.Store({
  state,
  mutations,
  strict: debug, // 严格模式： 此模式下所有状态的变更且不是由mutation函数引起，将会抛出错误。
  plugins: debug ? [createLogger()] : [] // 在开发环境下，配置日志插件。
})

使用方式

假设，在定位界面获取到经纬度并写入到store中如何操作。

在main.js中配置

import store from '@/store/index'
Vue.prototype.$store = store

在.vue文件中

import {mapState, mapMutations} from 'vuex'
import * as types from '@/store/mutation-types'

export default {
	data () {
		return {
		}
	},
	methods: {
		// 配置方法，通过`this.saveLatitude(32.1242)`和`this.saveLongitude(120.2324)`存储经纬度。
		...mapMutations({
	      saveLatitude: types.SET_LATITUDE,
	      saveLongitdue: types.SET_LONGITUDE
	    })
	},
	computed: {
		// 配置State，通过`this.latitude`和`this.longitude`方法读取值。
		...mapState([
			'latitude',
			'longitude'
		])
	}
}

mapState和mapMutations两者可以单独出现，如果只是读取引入mapState即可。

小结

以上就是vuex基本使用，总结如下：

• 如何安装vuex，通过npm命令快速安装
• 配置vuex安装到Vue中
• 编写state、mutations等文件
• 如何将store应用到页面中。

参考

其他详细用法请参考Vuex状态管理 文档。