vue框架中Vuex的简单使用（Vue学习笔记）

Vuex是什么：

首先了解下什么是Vuex，官网定义：

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化

Vuex基于单向数据流：

以下是一个表示“单向数据流”理念的简单示意：

• state，驱动应用的数据源；
• view，以声明方式将 state 映射到视图；
• actions，响应在 view 上的用户输入导致的状态变化。

要学会Vuex 以下这个图要背会考   

https://vuex.vuejs.org/zh/

官网介绍很详细，这里只是个人学习笔记，写出来加深下印象

Vue脚手架中使用Vuex

安装：

npm install vuex --save

在main.js下引用

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

当然如果你是搭建脚手架的时候直接勾选了Vuex，那么这些安装步骤，脚手架已经为你准备好了

这里是使用vue脚手架的UI方式来创建一个vue项目：

如果你安装好了cli，在命令行窗口上输入：vue ui

浏览器就会自动跳出窗口，就可以可视化操作创建一个ui项目：

将Vuex勾上

创建完运行一下:

然后打开：

 

 

使用案例

下面是对vuex 的使用案例

打开项目目录

我们在store文件夹下的index 可以看到脚手架已经自动帮我们引用了Vuex

下面是一个简单的使用例子：

这里直接使用已有组件，HelloWorld.vue 与About 之间进行传值

将小明的名字通过传值处理为高大尚的英文名 'xiaoming'

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    // 将这里的name传给About组件
    name: '小明'
  },
  mutations: {
    // 这里changeName(可以随便起名只要与action中的函数名一致)接收action处理完的值
    // 调用state改变state中的值
    changeName (state, name) {
      state.name = name
    }
  },
  actions: {
    // 这里的值一般是 vue Componnets传过来
    // 如果不需要经过复杂的计算也可以在vue中直接commit 提交给mutations
    // 调用commit 提交给mutations
    // 这里接收HelloWorld 传过来的 'xiaoming'
    changeName (ctx, name) {
      ctx.commit('changeName', name)
    }
  },
  modules: {
  }
})

没经过处理前，在about上直接取值看下：

About组件上取值代码：

<template>
  <div class="about">
    <h1>{{this.$store.state.name}}</h1>
  </div>
</template>

经过HelloWorld组件传值更新

HelloWorld组件上代码：

我们在h1上绑定一个点击事件：

    <h1 @click="changeNameHandel">{{ msg }}</h1>

在methods 中定义函数changeNameHandel 将值提交给store中的actions，当然也可以直接点给Mutations

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      name: 'xiaoming'
    }
  },
  props: {
    msg: String
  },
  methods: {
    changeNameHandel () {
      // 这里将值传给 actions
      this.$store.dispatch('changeName', this.name)
      //这里是跳转到about页面
      this.$router.push('/about')
    }
  }
}
</script>

然后让我们点下h1 试下

然后我们成功的将 '小明' 变成了 'xiaoming'

个人学习笔记，用于个人学习，如有误，请指教