vue项目开发： 状态管理 vuex

1、安装vuex

sudo cnpm install vuex --save

2、创建src/store/index.js

// src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

const store = new Vuex.Store({
   
	state: {
   
		count: 1
	}
});

export default store

3、在main.js中挂载store到vue实例上

// src/main.js
import Vue from 'vue'
import App from './App'
import store from './store'

new Vue({
   
	el: '#app',
	store,
	render: h => h(App)
});

4、vuex的基本使用

<!-- App.vue -->
<template>
	<div id="app">{
  {$store.state.count}}</div>
</template>

5、vuex使用mutations定义同步方法

// src/store/index.js
const store = new Vuex.Store({
   
	state: {
   
		counter: 1
	},
	mutations: {
   
		// 无参方法，state是默认参数
		increment(state) {
   
			state.counter++
		},
		// 带参方法-普通提交：传值
		increment2(state, count) {
   
			state.counter += count;
		},
		// 带参方法-对象提交：传对象
		increment3(state, payload) {
   
			state.counter += payload.count;
		}
	}
});

<!-- App.vue -->
<script>
	export default {
    
		methods: {
    
			add() {
    
				this.$store.commit('increment');
			},		
			addCount(count) {
    
				// 普通提交
				this.$store.commit('increment2'<