vuex store使用总结 1 ( 简单使用 )

                                                 vuex 的使用总结 1  ( 简单场景应用 )

https://vuex.vuejs.org/zh/

前言: 大家在写代码的时候  有没有遇到 数据共享传递 或者 多个界面 共享数据的情况。 vue 本身特性 导致了它 数据传递非常繁琐。 而且对于 兄弟组件之间的 数据交互 无能为利

当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：

    * 多个视图依赖于同一状态。
    * 来自不同视图的行为需要变更同一状态。

对于问题一，传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。
对于问题二，我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码。

因此，我们为什么不把组件的共享状态抽取出来，以一个全局单例模式管理呢？在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为！通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性，我们的代码将会变得更结构化且易维护。

通过脚手架 安装 vuex

npm install vuex --save

安装完成后你就可以找到它

 然后再 src 目录中 创建 store 文件夹  再创建 index.js

index.js

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

Vue.use(Vuex)

export const store = new Vuex.Store({
	state:{//设置属性 用来存储数据
		
	},
	getters:{//对应方法 用来获取属性的状态
		
	},
	mutations:{//更改属性的状态
		
	},
	actions:{//应用 mutation
		
	}
})

再 main.js 中使用 store

import store from './store/index' //引用 index.js


///
///

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

再需要使用数据的  .vue 中使用

需求  http 请求到的数据  message  储存到 vuex 中

1. 首先再 store 中的 index.js 添加 message  属性  和 setmessage() 方法

  

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

Vue.use(Vuex)

export const store = new Vuex.Store({
	state:{//设置属性 用来存储数据
		message:{}
	},
	getters:{//对应方法 用来获取属性的状态
		
	},
	mutations:{//更改属性的状态
		setMessage(state, data){//定义的修改 属性的方法
			state.message = data
		}
	},
	actions:{//应用 mutation
		
	}
})

赋值的使用

 .vue 的 组件中 赋值

/// setMessage 为 store index.js 中的  mutations 属性中的定义的方法
this.$store.commit('setMessage',data.message)

获取属性的使用

 .vue 的 组件中 获取属性

/// message为 store index.js 中的  state属性中的定义的方法
this.$store.state.message

在这里一般会写成 get() set() 方法

///一般写在 computed:{ } 中
computed:{
    get(){
        return this.$store.state.menuItems
    },
    set(data){
        this.$store.commit('setMessage',data)
    }
}

getters 的获取属性的方法使用

this.$store.state.menuItems   最简单粗暴 直接获取 但是能 这个属性是完全暴露在外边的  可以是用 getters 来 实现z

在 getters 定义属性

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

Vue.use(Vuex)

export const store = new Vuex.Store({
	state:{//设置属性 用来存储数据
		message:{}
	},
	getters:{//对应方法 用来获取属性的状态
		getMessage:state => state.message,
	},
	mutations:{//更改属性的状态
		setMessage(state, data){
			state.message = data
		}
	},
	actions:{//应用 mutation
		
	}
})

 

从 getters  中获取 message

let data = this.$store.getters.getMessage

 （小知识点） this 还没有初始化 可以用vm

vuex dispatch 的使用  在 action 中使用：

事实上在 vuex 里面 actions 只是一个架构性的概念，并不是必须的，说到底只是一个函数，你在里面想干嘛都可以，只要最后触发 mutation 就行。异步竞态怎么处理那是用户自己的事情。vuex 真正限制你的只有 mutation 必须是同步的这一点,在vue中，只有mutation才能正真改变VUEX stroe中的state,

this.$store.dispatch('setUser',null)

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

Vue.use(Vuex)

export const store = new Vuex.Store({
	state:{//设置属性 用来存储数据
		message:{},
		localuser:{},
	},
	getters:{//对应方法 用来获取属性的状态
		getMessage:state => state.message
	},
	mutations:{//更改属性的状态
		setMessage(state, data){
			state.message = data
		},
		
		//更改用户状态信息
		setLocalUser(state,data){
			if(data){
				state.localUser = data
			}else{
				state.localUser = null
			}
		}
	},
	actions:{//应用 mutation
		setUser({commit},data){
			commit('setLocalUser', data)
		}
	}
})

Action 提交的是 mutation，而不是直接变更状态。 Action 可以包含任意异步操作。 个人觉得这个action的 产生就是 因为mutation 不能进行异步操作，如果有异步操作那么就用action 来提交mutation

另外两篇：

• vuex store使用总结 1 ( 简单使用 )
• vuex store使用总结 2 ( 功能化的使用)
• vuex store使用总结 3 (模块化的使用 )