VueX的使用方式(组件之间建立的“卫星“)

作者:老吴(转载请注明出处)

1、什么Vuex是Vuex我们为什么要使用Vuex？

• 什么是Vuex

说简单通俗一点Vuex就是建立在Vue中的一个类似于数据库的一个模板,为什么要把Vuex叫做数据库呢?是因为Vue里所有的组件都可以访问到Vuex里面的数值。他也类似于本地存储因为他们都可以被组件访问

• 为什么要用Vuex

那么既然有本地存储了那还用Vuex干嘛? 因为Vuex里面包含了很多方法,有存储方法，有存储数据，有计算数据的方法，也有方法异步的方法，所以Vuex彻底完胜本地存储

• 废话不多说咱们开始

2、安装Vuex

• 建议使用vue3脚手架因为在vue3中自带vuex

从第三步骤看吧

• vue2安装步骤

1. npm下载

• 使用npm i vuex -s下载到本地

2. Vuex创建

1. 在src文件里面创建一个命名一个叫store的文件夹
2. 然后在store文件夹里在新建一个名叫index.js的文件
3. 然后在index.js文件里写入

mport Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
  state: {},//存储数据的方法
  mutations: {},//用于执行被调用的方法
  actions: {},//由于执行异步的方法
});

• 下面我来简述一下常用的方法

3、方法介绍

1. State

• 先在stale方法里放入自己定义的属性

//js
  state: {
    sum:100,
  },

• 在html中使用

//html
<template>
{{$store.state.sum}}
</template>

• 在vue里方法使用

//vue
<template>
	{{sum}}
</template>
<script>
data(){
	return {
		sum:this.$store.state.sum
	};
}
</script>

2、 Actions

• 执行异步方法的操作
  Action 提交的是 mutation，而不是直接变更状态。
  Action 可以包含任意异步操作。

actions: {
  increment ({ commit }) {
    commit('increment')
  }
}

• Action 通过 store.dispatch 方法触发：

store.dispatch('increment')

3、 Mutation

• 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
• Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 变更状态
      state.count++
    }
  }
})

• 执行方法

this.$store.commit('increment')

• 在Mutation方法里可以添加数据

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state,val) {
      // 变更状态
      state.count=val++
    }
  }
})

• 执行方法

this.$store.commit('increment',this.sum)

4、总结

适用于有一定vue基础的人群、由于作者是第一次发布文章所以暂时没有此项目的下载地址、如有不足之处欢迎下方评论