一、概念

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对象上

六、代码示例

实现效果如下↓

Vuex快速入门实战_vue.js

目录结构如下↓

Vuex快速入门实战_vuex教程_02

代码如下↓

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的方法