4、Vuex属性与使用方法
Vuex 是一个专为 Vue.js 应用程序设计的状态管理模式。它通过一个单一的状态树(store)管理整个应用程序的状态,使得状态的管理变得更加简单和一致。
下面是 Vuex 中的每个属性的说明:
- state:存储应用程序的状态。
- getters:计算 state 中的数据并返回一个新的值。
- mutations:更改 state 中的数据。
- actions:提交 mutations,以更改 state 中的数据。
- modules:将 store 划分成多个模块,以便于管理。
使用 Vuex 需要遵循以下步骤:
- 安装 Vuex:使用 npm 安装 Vuex。
- 创建 store:在应用程序的根目录中创建 store.js 文件。
- 定义 state:在 store.js 文件中定义 state。
- 定义 getters:在 store.js 文件中定义 getters。
- 定义 mutations:在 store.js 文件中定义 mutations。
- 定义 actions:在 store.js 文件中定义 actions。
- 注册 store:在应用程序的 main.js 文件中注册 store。
- 在组件中使用 store:在需要使用 store 的组件中访问 state 和 getters。
以上是 Vuex 的基本使用方法,更多细节可以参考 Vuex 官方文档。
以下是一个使用 Vuex 的代码举例:
// store.js
import Vue from 'vue'
import Vuex from 'vuex'
// 使用 Vuex
Vue.use(Vuex)
// 定义 Vuex 状态
const state = {
count: 0
}
// 定义 Vuex 计算属性
const getters = {
count: state => state.count
}
// 定义 Vuex 变更
const mutations = {
increment (state) {
state.count++
},
decrement (state) {
state.count--
}
}
// 定义 Vuex 动作
const actions = {
increment ({ commit }) {
commit('increment')
},
decrement ({ commit }) {
commit('decrement')
}
}
// 导出 Vuex Store 实例
export default new Vuex.Store({
state,
getters,
mutations,
actions
})
// main.js
import Vue from 'vue'
import App from './App.vue'
import store from './store'
// 创建 Vue 根实例
new Vue({
// 注册 Vuex Store
store,
// 渲染根组件
render: h => h(App)
}).$mount('#app')
// App.vue
<template>
<div>
<!-- 显示 count 的值 -->
<p>{{ count }}</p>
<!-- 点击 + 按钮,触发 increment 动作 -->
<button @click="increment">+</button>
<!-- 点击 - 按钮,触发 decrement 动作 -->
<button @click="decrement">-</button>
</div>
</template>
<script>
export default {
// 计算 count 的值
computed: {
count () {
return this.$store.getters.count
}
},
methods: {
// 触发 increment 动作
increment () {
this.$store.dispatch('increment')
},
// 触发 decrement 动作
decrement () {
this.$store.dispatch('decrement')
}
}
}
</script>
用Vuex进行组件间通讯
Vue组件间通信的Vuex方式是通过Vuex状态管理库来实现的。它允许我们在一个单独的地方维护应用程序的状态,并在所有组件中共享这个状态。以下是一个简单的示例,展示了如何在两个组件之间使用Vuex进行通信:
1、首先,在src目录下新建一个store.js文件,用来创建Vuex store。
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
//state:存储应用程序的状态,通常是一个对象。
state: {
message: ''
},
//mutations:修改state的唯一途径,它们是同步的事务。
mutations: {
setMessage(state, payload) {
state.message = payload
}
},
//actions:提交mutations,但是可以包含任意异步操作。
actions: {
setMessage(context, payload) {
context.commit('setMessage', payload)
}
},
//getters:对state进行派生,通常是一些计算属性。
getters: {
getMessage(state) {
return state.message
}
}
})
2、在需要使用Vuex的组件中引入store。
import store from '@/store'
3、在发送组件中触发Vuex中的action,以更新state中的值。
<template>
<div>
<input type="text" v-model="message">
<button @click="setMessage">Send</button>
</div>
</template>
<script>
export default {
data() {
return {
message: ''
}
},
methods: {
setMessage() {
this.$store.dispatch('setMessage', this.message)
}
}
}
</script>
4、在接收组件中通过计算属性获取Vuex中的值。
<template>
<div>
<p>Received message: {{ message }}</p>
</div>
</template>
<script>
export default {
computed: {
message() {
return this.$store.getters.getMessage
}
}
}
</script>
在这个示例中,我们创建了一个名为message的状态属性,并定义了一个名为setMessage的mutation来更新该属性的值。我们还定义了一个名为setMessage的action来提交mutation,以便我们可以从发送组件中调用它。
在发送组件中,我们将message的值绑定到一个文本输入框,并创建一个名为setMessage的方法,该方法将使用dispatch方法触发Vuex action来更新状态值。
在接收组件中,我们使用计算属性来获取Vuex中的值,以便我们可以在模板中显示它。