一、概念
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
二、应用场景
- 多个视图依赖于同一状态
- 来自不同视图的行为需要改变同一个状态
三、组成介绍
- State 数据仓库
- getter 获取数据
- Mutation 修改数据
- Action 提交Mutation
四、Vue框架搭建
Vue初识之框架搭建_大道至简，悟在天成。_vue 框架搭建一、简介Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。二、框架搭建创建之前需要安装 Node.js 和npm yarn 这俩个环境1.安装 nodejs命令：yarn global add @vue/cli
五、安装Vuex
- 安装vuex包:npm install vuex 或 yarn vuex
- 创建vuex实例:new Vuex.store()
- main.js中将vuex实例挂载到vue对象上
六、代码示例
实现效果如下↓
目录结构如下↓
代码如下↓
App.vue
<template>
<div id="app">
<!-- <img alt="Vue logo" src="./assets/logo.png">-->
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>main.js
<template>
<div id="app">
<!-- <img alt="Vue logo" src="./assets/logo.png">-->
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>HelloWorld.vue
<template>
<div class="app">
<P style="color: red">mutations方法</P>
<el-button @click="show">按钮</el-button>
<div>count:{{this.$store.state.count}}</div>
<div>
<P style="color: red">getters方法</P>
<P>获取过滤后的参数：{{this.$store.getters.doneTodos}}</p>
<P>获取长度：{{this.$store.getters.doneTodosCount}}</p>
<P>获取count + 2：{{this.$store.getters.gettersCount}}</p>
</div>
<P style="color: red">action方法</P>
<button @click="incre">累加</button>
</div>
</template>
<script>
export default {
name: 'app',
methods:{
show(){
//count++
// this.$store.commit('countIncrease')
//直接调用main的countIncrease方法改变count为固定value
this.$store.commit('countIncrease',100)
this.$message.success('element-ui提示' )
},
incre(){
//改变值的话，引用store.js的increment同步方法
// this.$store.commit("increment")
//异步处理，当你的操作行为中含有异步操作，比如向后台发送请求获取数据，就需要使用action的dispatch去完成了
this.$store.dispatch('actionsCount')
},
},
//若是对数据进行处理输出，比如数据要过滤，一般我们可以写到computed中
computed:{
// todos:function() { //通过方法访问
// return this.$store.getters.doneTodos;
// },
// doneTodosCount () {
// return this.$store.getters.doneTodosCount
// }
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style >
</style>七、总结
- mutations 用于修改数据,或提交新的value并修改，只能同步操作。
- getters 获取数据，很多地方如果都需要使用可以通过getters提出来共享
- actions 通过dispatch异步操作调用mutations修改数据，当你的操作行为中含有异步操作，比如向后台发送请求获取数据就可以使用actions调用mutations的方法
