功能篇：vue中的vuex使用例子
Vuex 是 Vue.js 的状态管理模式和库。它用于管理应用程序的全局状态，使组件之间的状态共享变得更加简单，并且提供了可追踪的状态变更记录。
下面是一个简单的 Vuex 使用例子，包括创建一个 Vuex store、定义 state、mutations、actions 和 getters，以及在 Vue 组件中使用它们。
### 1. 安装 Vuex
首先确保你已经安装了 Vuex。如果你还没有安装，可以通过 npm 或 yarn 来安装：
```bash
npm install vuex --save
# 或者
yarn add vuex
```
### 2. 创建 Vuex Store
在你的项目中创建一个新的文件 `store/index.js`，然后定义你的 store：
```javascript
// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
count: 0,
},
mutations: {
increment(state) {
// 变更状态
state.count++;
},
decrement(state) {
state.count--;
}
},
actions: {
increment({ commit }) {
commit('increment');
},
decrement({ commit }) {
commit('decrement');
}
},
getters: {
count: state => state.count
}
});
```
### 3. 在主应用中引入 Store
接下来，在你的主应用文件（通常是 `main.js`）中引入并使用这个 store：
```javascript
// main.js
import Vue from 'vue';
import App from './App.vue';
import store from './store';
new Vue({
store, // 将 store 注入到所有子组件中
render: h => h(App),
}).$mount('#app');
```
### 4. 在组件中使用 Store
现在你可以在任何组件中访问这个 store。这里是如何在组件中使用它的一个例子：
```html
<template>
<div class="counter">
<p>{{ count }}</p>
<button @click="increment">+</button>
<button @click="decrement">-</button>
</div>
</template>
<script>
export default {
computed: {
// 映射 getter 到局部计算属性
count() {
return this.$store.getters.count;
}
},
methods: {
// 映射 action 到方法
increment() {
this.$store.dispatch('increment');
},
decrement() {
this.$store.dispatch('decrement');
}
}
};
</script>
```
在这个例子中，我们定义了一个计数器应用，它有增加和减少两个按钮来改变存储在 Vuex store 中的 `count` 状态。通过使用 `computed` 属性，我们可以轻松地将 store 的状态映射到组件的数据属性；而通过 `methods`，我们可以触发 Vuex 中定义的动作来改变状态。
### 注意事项
- Vuex 强烈建议所有的状态变更都应该是显式的动作（actions），即通过提交 mutation 来变更状态。
- Vuex 的 store 是单例模式，意味着在整个应用中只有一个 store 实例。
- 如果你的应用比较简单，可能不需要 Vuex，因为简单的状态管理可以直接在组件内部完成。但是当你的应用变得越来越大时，Vuex 就显得非常有用。
以上就是如何在 Vue.js 应用中设置和使用 Vuex 的基本步骤。根据实际需求，你可以进一步扩展你的 store，比如添加更多的模块（modules）、异步逻辑等。