【 Vue 】Vuex

Vuex

每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)

• 下载vuex
  • npm install vuex --save
• 引入vuex

  	import Vue from 'vue'
  	import Vuex from 'vuex'
  	Vue.use(Vuex)
  

• 创建一个store

  const store = new Vuex.Store({
  	state: {},
  	getters:{},
  	mutations: {},
  	actions:{]
  })
  new Vue({
  	// 将vuex挂载到vue上
  	store,
  	render:h=>h(App)
  }).$mount('#app')
  

state

• state 是Vuex中的基本数据
• state 上存放的就是所谓的状态
• 辅助函数写在计算属性(computed)里面
• 当没有使用 state 的时候，直接在 data 中进行初始化
• 有了 state 之后，我们就把 data 上的数据转移到 state 上去了。

// 获取state中数据的方式
	new Vuex.Store({
		// 存放数据、状态
		state:{
			count:0
		}
	})
// ===============================================================
	// 方式一 : 原始方式 插值表达式
	<div id="#app">
		{{$store.state.count}}
	</div>
// ===============================================================
	// 方式二 : 计算属性
	<div id="#app">
		{{count}}
	</div>
	
	export default{
		computed:{
			count(){
				return this.$store.state.count
			}
		}	
	}
// ===============================================================
	// 方式三 : 辅助函数 简化了计算属性方式
	<div id="#app">
		{{count}}
	</div>

	import {mapState} from 'vuex'
	export default{
		computed:{
			...mapState(['count'])
		}
	}

getters

• getters其实就是store的计算属性，对state里面的状态进行过滤处理
• 辅助函数写在计算属性(computed)里面
• 对state中的成员加工后传递给外界

	new Vuex.Store({
		// 存放数据、状态
		state:{
			count:0
			lists:[1,2,3,4,5,6,7,8,9]
		},
		getters:{
			// 第一个参数是state
			filter: state => {
				// 过滤掉不符合条件的数据
				state.list.filter(item => item > 2)
			}
		}
	})
// ===============================================================
		<h1>getters</h1>
	    <p>原始形式 : {{ $store.getters.filter }}</p>
	    <p>辅助函数: {{ filter }}</p>

		// 引入辅助函数
		import {mapGetters} from "vuex"
		export default{
			 computed: {
			    ...mapGetters(["filter"]),
			  },
		}

mutation

• this.$store.commit( ) 提交mutations
• 辅助函数写在方法(methods)里面
• state中的数据修改只能、必须通过mutations
• mutations必须是同步更新 目的是形成数据快照
  • 数据快照 : 一次mutations的执行 立刻得到一种视图状态
  • 必须是同步的

// 定义mutations
	new Vuex.Store({
		// 存放数据、状态
		state:{
			count:0
		},
		// 修改state中的数据
		mutations:{
			// 修改state中数据的方法
			/* 
		      方法带的参数 
		      (state,payload)
		      state:vuex中的state对象
		      payload 传递的参数
		    */
			modifyState(state, payload){
				return 	count += payload
			}
		}
	})
// ===============================================================
	<template>
		<h1>mutations</h1>
		<button @click="add">原始方式修改state</button>
	    <button @click="modifyState(1000)">辅助函数修改state</button>
	</template>

	export default{
		// 引入辅助函数
		import {mapMutations} from "vuex"
		methods:{
			// 原始方式
			add(){
				// commit('<mutations下的方法名称>',<mutations下传递的参数>)
				this.$store.commit('modifyState',100);
			},
			// 辅助函数 调用的时候 modifyState('传递的参数')
			...mapMutations(['modifyState'])
		}
	}

注意 vue中的方法默认第一个参数 是事件参数对象 $event

action

• 调用action this.$store.dispatch('方法',参数)
• 辅助函数写在方法(methods)里面
• 执行异步操作 获取数据 将数据提交给mutations进行修改

	new Vuex.Store({
		// 存放数据、状态
		state:{
			count:0
		},
		
		// 修改state中的数据
		mutations:{
			// 修改state中数据的方法
			/* 
		      方法带的参数 
		      (state,payload)
		      state:vuex中的state对象
		      payload 传递的参数
		    */
			modifyState(state, payload){
				return 	count += payload
			}
		},
		
		// 执行异步请求 将数据提交给mutations进行修改
		actions:{
		 /*
		      参数 (<执行的上文文的对象>,传递参数)
		      (context,params)
		      context 相当于就是 this.$store
		 */
    		getAsyncCount(context, params) {
		      // 模拟异步
		      setTimeout(() => {
		        // 将事件提交到mutations
		        context.commit('modifyState', params)
		      }, 1000)
		    }
		}
	})
// ===============================================================
 	<h1>actions</h1>
    <button @click="getAsync">原始形式异步调用</button>
    <button @click="getAsyncCount(100)">辅助函数异步调用</button>
	
	import { mapActions } from "vuex";
	export default{
		methods:{
			// 辅助函数
			    ...mapActions(["getAsyncCount"]),
			    // 原始方法
			    getAsync() {
			      this.$store.dispatch("getAsyncCount", 555);
			    },
		}
	}

modules

• 模块化
• $store.state.模块名称.模块属性
• 辅助函数 在getters里面(不是子模块的getters) 获取数据

	new Vuex.Store({
		state:{},
		getters:{
			token: state => state.user.token,
		    name: state => state.setting.name
		],
		mutations:{},
		actions:{},
		modules: {
		    // 子模块
		    user: {
		      state: {
		        token: "12345"
		      },
		    },
		    setting: {
		      state: {
		        name: "zwj"
		      },
		    }
		  }
	})
// ===============================================================
 	<h1>modules</h1>
    <p>name : {{ $store.state.setting.name }}</p>
    <p>token : {{ $store.state.user.token }}</p>

    <p>辅助函数:{{ name }}</p>
    <p>辅助函数:{{ token }}</p>
	
	export default{
		...mapGetters(['name','token'])
	}

完整代码