vuex的用法

Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

其实最简单理解为，在我们写Vue组件中，一个页面多个组件之间想要通信数据，那你可以使用Vuex

安装

npm install vuex --save

引用

在一个模块化的打包系统中，您必须显式地通过Vue.use()来安装 Vuex：

import Vue from 'vue'//var Vue = require('vue')
import Vuex from 'vuex'//var Vuex = require('vuex')
Vue.use(Vuex)

开始

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

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

const store = new Vuex.Store({
	state: {
		getSearchName: 'hello vuex, I am wscats',
	},
	//接受组件commit传过来的数据并保存到state中,this.$store.commit('changeSearchName', this.searchName);
	mutations: {
		changeSearchName: function(state, a) {
			state.searchName = a;
		},
	},
	//可以从组件调用此方法获取值，一般配合计算属性动态获取值
	//(1)return this.$store.state.searchName
	//(2)return this.$store.getters.getSearchName
	getters: {
		getSearchName: function(state) {
			return state.searchName;
		}
	}
})

视图中获取getSearchName值然后触发**search()**函数，看下面的this.$store.commit('changeSearchName', this.getSearchName);函数

<input type="search" @keyup="search()" v-model="getSearchName" placeholder="搜索" />

通过在根实例中注册store选项，该 store 实例会注入到根组件下的所有子组件中，且子组件能通过 this.$store访问到

const app = new Vue({
	store
}).$mount('#app')

往state设置值

直接设置state的值

this.$store.state.title = “wscats”

触发mutations

通过commit方法提交直接触发mutations

methods: {
	search() {
		this.$store.commit('changeSearchName', this.getSearchName);
	}
},

触发actions

定义action

actions: {
	setChange(context, data) {
		context.commit('setCount', data)
		context.commit('settitle', data)
	},
	setNews(context, data) {
		context.commit('setNews')
	}
}

然后在组件中用dispatch触发action的改变

methods: {
	loadMore() {
		this.$store.dispatch("setNews")
	}
}

从state获取值

直接获取state的值

不推荐这种做法

computed: {
	searchName() {
		return this.$store.state.searchName;
                //或者return this.$store.state.searchName
	}
},

通过getters方法获取

先在store中定义getters

getters: {
	getTitle(state) {
		//处理数据
		return state.title + "ed"
	}
}

然后通过getters方法配合computed计算属性动态获取

computed: {
	title() {
		//直接获取状态
		//this.$store.state.title
                //通过getters获取状态
		return this.$store.getters.getTitle
	}
}

更多详情可参考官方文档

原文：https://github.com/Wscats/vue-tutorial/issues/12