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

最新推荐文章于 2025-03-26 17:01:05 发布

nicepainkiller

最新推荐文章于 2025-03-26 17:01:05 发布

阅读量3.3k

点赞数 6

分类专栏： Vue 文章标签： vuex store使用总结 1 ( 简单使用 )

本文链接：https://blog.csdn.net/nicepainkiller/article/details/90409673

版权

Vue 专栏收录该内容

33 篇文章

订阅专栏

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 中

首先再 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

另外两篇：