一篇文章教你学会vuex

Posted 2021-06-08 syf976561581

vueX是什么

是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间数据的共享.

什么情况下我应该使用 Vuex？

Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。
如果您不打算开发大型单页应用，使用 Vuex 可能是比较复杂的因为他分为一块一块的(模块化)。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式 (opens new window)就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，vuex将数据分为一个一个模块,这样可以更方便管理。能够提高开发效率.

vuex好处:

 1. 能够在vuex中,集中管理共享的数据,易于开发和后期维护
 2. 能够高效地实现组件之间的数据共享,提高开发效率
 3. 存放在vuex中的数据都是响应式的,能够实时保持数据与页面的同步   

vuex安装指令: npm install vuex --save

vuex文件配置:

1. src里面创建store文件夹,在store文件夹里面创建创建index.js配置vuex

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
	//存放的内容所有组件都可以访问,类似于data
	name:"张三'
	},
  mutations: {},
  actions: {},
  modules: {},
});

2.在main.js里面配置

import store from "./store";

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

vuex里面的五个核心属性:

1.state:单一状态树

提供唯一的公共数据源,所有共享数据都要统一放到Store的State中进行存储

示例

创建store数据源,
const store = new Vuex.Store({
	state:{
		name:"张三"
	}
})
在控制台里面的vue那里查看
1.在组件中使用this.$store.state.全局数据名称 ,来访问数据
2.使用计算属性获取最简单
computed:{
    name(){
      return this.$store.state.name
    }

注意:在其他方法中不要直接修改state里面的属性,想要修改请使用Mutation

2.mutation:用于变更Store中的数据

特点:

1. 提交更新数据的方法,必须是同步的(如果需要异步使用action)
2. 只能通过mutation变更store数据,不可以直接操作Store中的数据
3. 通过这个方式虽然操作起来稍微繁琐一些,但是可以集中监听所有数据的变化

注意:里面不要执行异步操作

   /定义mutation
const store = new Vuex.Store({
	state:{
		count:0
	},
	mutations:{
	第一个参数是state对象,第二个参数是修改state里面数据
		add(state,data){
		变更状态
		state.count=data;
		//触发mutation

	}
	}
})

methods:{
	aa(){
		add是mutation里面的方法
		触发mutation 
		this.$store.commit('add')

3.action:异步的方式修改state数据

和mutation功能大致相同,不同之处在与action提交的是mutation,必须要在mutation里面调用,而不是直接变更状态,可以包含异步操作

//定义action
const store = new Vuex.Store({
	state:{
		count:0
	},
	mutations:{
		add(state){
		state.count++
	}
	},
actions:{
//第一个参数是context
//第二个参数是修改state数据的参数比如num++
	addAsync(context num){
		setTimeout(()=>{
		context.commit('add')
},1000)
	}
}

methods:{
	abc(){
		addAsynce 是actions里面的方法,abc自己定义的方法
		this.$store.dispatch('addAsynce')//组件中调用

dispatch 用来触发action的方法

4.getters:

特点:

1. 从基本数据state派生的数据,相当于state的计算属性,具有返回值的方法
2. 会返回一个新数据,不会影响到state里面的老数据
3. store中的数据发生变化.getter的数据也会跟着变化

const store = new Vuex.store({
	state:{
		count:0
	},
getters:{
	userId1:function(state){
		return state.count * 2
	}
}

 触发 this.$store.getters.userId

modules:

用来模块化vuex,可以让每一个模块拥有自己的state,mutation,action,getters,使得结构非常清晰,方便管理

具体请看官网:https://vuex.vuejs.org/zh/guide/modules.html.

作者创作不容易,如果文章对你有帮助,记得留下你的点赞和关注呦