Vuex-Store仓库的入门使用

五个核心概念：

state : vuex的基本数据，用来存储变量
getters : 从基本数据(state)派生的数据，相当于state的计算属性
mutations : 提交更新数据的方法，必须是同步的(如果需要异步使用actions)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。 回调函数就是在实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。
actions : Action 提交的是 mutation，而不是直接变更状态。 Action 可以包含任意异步操作。
modules : 模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

入门实例：

创建一个vue项目，安装vue脚手架

npm install -g @vue/cli-init
vue create 项目名称
cd 文件夹  #进去create项目的所在文件夹，添加路由和vuex
vue add router #添加路由，多一个router.js文件
vue add vuex　#安装vuex ,多一个store.js文件

基本数据的使用，可用作全局变量

在store.js中添加基本数据

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
	  count:1 // 添加基本数据
  },
  mutations: {

  },
  actions: {

  }
})

在Home.vue页面上使用store中的基本数据

<template>
  <div class="home">
	   <h1>{{ this.$store.state.count }}</h1>
  </div>
</template>
<script>
export default {
  name: 'home',
  components: {}
}
</script>

页面效果

其他入门使用实例

在home.vue中添加上增加和减少的方法，使用store中的mutations中的方法

<template>
	<div class="home">
		<h1>{{ this.$store.state.count}}</h1>
		<h3>mutations模块</h3>
		<button @click="addNum()">增加</button>
		<button @click="subNum()">减少</button>
		<h3>actions模块</h3>
		<button @click="addCount()">add</button>
		<button @click="subCount()">sub</button>
		<br>
		<h3>输入提交数据</h3>
		<input v-model="num" />
		<button @click="submitNum()">提交数据</button>
	</div>
</template>

<script>
	export default {
		name: 'home',
		data(){
			return {
				num: 0
			}
		},
		components: {},
		methods:{
			addNum(){
				this.$store.commit('addNumMutations'); //提交到mutations中的addNumMutations
			},
			subNum(){
				this.$store.commit('subNumMutations'); //提交到mutations中的subNumMutations
			},
			addCount(){
				this.$store.dispatch('addActions');    //以载荷方式分发，先到actions，在actions中调用mutations中的方法
			},
			subCount(){
				this.$store.dispatch({type:'subActions'}); //以对象方式分发，先到actions，在actions中调用mutations中的方法
			},
			submitNum(){
				this.$store.dispatch('submitNumActions',this.num); //调用时使用（方法名，值）的方法，异步使用actions
			}
			
		}
	}
</script>

store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
	  count:1
  },
  mutations: {
	  addNumMutations(state){state.count++},
	  subNumMutations(state){state.count--},
	  submitNumMutations(state,res){state.count=res}
  },
  actions: {
	  addActions({commit}){commit('addNumMutations')},
	  subActions({commit}){commit('subNumMutations')},
	  submitNumActions({commit},res){
		  commit('submitNumMutations',res)}
  }
})

dispatch：异步操作，写法： this.$store.dispatch('mutations方法名',值)
　commit：同步操作，写法：this.$store.commit('mutations方法名',值)

多模块Store的使用

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import cloneDeep from 'lodash/cloneDeep'
import common from './modules/common'
import user from './modules/user'
import dept from './modules/dept'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    common,
    user,
    dept
  },
  mutations: {
    // 重置vuex本地储存状态
    resetStore (state) {
      Object.keys(state).forEach((key) => {
        state[key] = cloneDeep(window.SITE_CONFIG['storeState'][key])
      })
    }
  },
  strict: process.env.NODE_ENV !== 'production'
})

modules中的文件统一结构如下

 export default {
  state:{},
  mutatons:{},
  actions:{},
  getters:{}
}

例如user.js
export default {
  namespaced: true,
  state: {
    id: 0,
    name: ''
  },
  mutations: {
    updateId (state, id) {
      state.id = id
    },
    updateName (state, name) {
      state.name = name
    }
  }
}

在vue页面设值和取值
设值

this.$store.commit('模块名/那个mutation',传入的值);
this.$store.commit('user/updateId ',this.userData);

取值

{{this.$store.state.模块.state中的属性}}
{{this.$store.state.user.name}}