Vuex使用

Vuex

一、概述

二、State

存放状态的

1、创建state

const state = {title: '我是一个标题',content: '今天的天气是好的',age: 2,
};

2、使用

直接在页面直接使用

//非模块化写法
<div>{{ $store.state.title }}</div>
//模块化写法
<div>{{ $store.state.about.title }}</div>

通过计算属性获取

computed: {getTitle() {//非模块化写法return this.$store.state.title//模块化写法：about是模块名return this.$store.state.about.title}
}

在页面使用

<div>{{ getTitle }}</div>

在计算属性中通过mapState辅助函数获取（推荐使用）
- 如果store不是模块化的：
```
computed: {...mapState(['title', 'content', 'age'])
}
```
- 如果store是模块化的：
```
computed: {...mapState('about', ['title', 'content', 'age'])
}
```
about是模块名称

三、Getters

1、创建无参的getters

const getters = {doubleAge(state) {return state.age * 2;}
}

2、创建携带参数的getters

const getters = {addValue: state => value => {return state.age + value;}
}

3、使用getters

在计算属性中获取

computed: {getDoubleValue() {//非模块化写法return this.$store.getters['doubleAge']//模块化写法：about是模块名return this.$store.getters['about/doubleAge']}
}

在计算属性中通过mapGetters辅助函数获取（推荐使用）

computed: {...mapGetters('about', ['doubleAge', 'addValue'])
}

在页面中使用无参函数

 <div>{{ doubleAge }}</div>

在页面使用有参数函数

<div>{{ addValue(10) }}</div>

在代码中使用无参函数

this.doubleAge()

在代码中使用有参函数

this.addValue(10)

四、Mutation

同步操作： Mutations 是用来修改 Vuex 的状态的唯一方式，它们是同步操作。
直接修改状态： Mutations 中的函数接收当前的状态作为第一个参数，并且可以接收一个额外的载荷参数来进行状态的修改。
跟踪变化： 由于 mutations 是同步执行的，因此它们很容易被调试工具跟踪，可以清晰地看到状态是如何被修改的。

1、创建无载荷的mutation

const mutations = {addTitle(state) {state.title = '我是新的标题';}
};

2、创建有载荷的mutation


const mutations = {addTitle(state,payload) {state.title = '我是新的标题'+payload;}
};

3、使用

直接使用

//提交无载荷methods: {addTitle() {//非模块化写法this.$store.commit('addTitle')//模块化写法：about是模块名this.$store.commit('about/addTitle')}},//提交有载荷(载荷一般是对象，这样可以传入多个值)methods: {addTitle() {//非模块化写法this.$store.commit('addTitle', "我是新标题呀！！！")//模块化写法：about是模块名this.$store.commit('about/addTitle', "我是新标题呀！！！")}},

通过mapMutation辅助函数（推荐使用）

//无参methods: {//非模块化写法...mapMutations(['addTitle'])//模块化写法：about是模块名...mapMutations('about', ['addTitle'])updateTitle(){this.addTitle()}}

//有参methods: {//非模块化写法...mapMutations(['addTitle'])//模块化写法：about是模块名...mapMutations('about', ['addTitle'])updateTitle(){this.addTitle("@163.com")}}

五、Action

异步操作： Actions 用于处理异步操作，例如从服务器获取数据、延迟调用 mutations 等。
包含业务逻辑： Actions 可以包含任意异步操作和复杂的业务逻辑，然后再去提交 mutations 来修改状态。
提交 Mutations： 在 actions 中可以通过 commit 方法提交 mutations，以实现状态的修改。

1、创建

const actions = {updateContent1({ commit }) {commit('setContent', '￥￥￥￥￥')},updateContent2({ commit }, newContext) {commit('setContent', newContext)}
};

2、使用

直接使用

  methods: {setContent() {//非模块化写法this.$store.dispatch('updateContent1')//模块化写法：about是模块名this.$store.dispatch('about/updateContent1')}}

通过mapAction辅助函数（推荐使用）

 	//非模块化写法...mapActions(['updateContent1', 'updateContent2']),//模块化写法：about是模块名...mapActions('about', ['updateContent1', 'updateContent2']),setContent1() {this.updateContent1()},setContent2() {this.updateContent2("$$$$$$$")}