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中的值，以便我们可以在模板中显示它。