VueX文章介绍（上篇）

VueX文章介绍

1关于VueX

·
VueX是适用于在Vue项目开发时使用的状态管理工具。试想一下，如果在一个项目开发中频繁的使用组件传参的方式来同步data中的值，一旦项目变得很庞大，管理和维护这些值将是相当棘手的工作。为此，Vue为这些被多个组件频繁使用的值提供了一个统一管理的工具——VueX。在具有VueX的Vue项目中，我们只需要把这些值定义在VueX中，即可在整个Vue项目的组件中使用。

在VueX对象中，其实不止有state,还有用来操作state中数据的方法集，以及当我们需要对state中的数据需要加工的方法集等等成员。

npm install vuex --save

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

Vue.use(Vuex)

成员列表：

 - state：存储数据和状态 
 - getters：对数据获取之前的再次编译，可以理解为state的计算属性。我们在组件中使用 $sotre.getters.fun()
 - mutations:修改状态，并且是同步的。在组件中使用$store.commit('',params)。这个和我们组件中的自定义事件类似。
 - actions 异步操作。在组件中使用是$store.dispath('')
 - modules store的子模块，为了开发大型项目，方便状态管理而使用的。

·
·
·

state

state其实就是全局响应式的数据，也就是说，在注册了store后，Vue组件就会从store中读取数据，说白了也可以理解为一个全局变量，这个全局就是整个项目，只是避免了不用再去使用父子组件传参或者请求接口的方式去拿全局变量，而是通过监听的形式，随时观察数据的更改。

在js中使用---this.$store.state.属性名---来获取；
在元素标签中使用---{{$store.state.属性名}}---来获取。

store/store.js

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

Vue.use(Vuex)

const state = {
    count: 0,
    name:"name-MO",
    age:'20',
    overtime:false 
}

export default new Vuex.Store({
    state
})

接下来，在main.js中引入store

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './vuex/store' // 引入store
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    store,
    components: { App },
    template: '<App/>'
})

在组件中使用
components.vue

<template>
  <div class="hello">
    <h3>{{$store.state.count}}</h3>
  </div>
</template>

·
·
·

mutations mutations 是同步操作

/**
 * mutations 里面放置的是我们操作state对象属性的方法
 */
const mutations = {
// 这个地方的方法是你在组件内定义的 commit 提交过来的一个方法
    // 第一个参数就是vuex中的 state数据
    // 第二个参数是你从子组件传递过来的采纳数
    // increment (state, val) {
    //  state.count += val
    // }
    mutationsAddCount(state, n = 0) {
        return (state.count += n)
    },
    mutationsReduceCount(state, n = 0) {
        return (state.count -= n)
    }
}
export default new Vuex.Store({
    state,
    mutations
})

然后在组件componets.vue中使用这个方法

<template>
  <div class="hello">
    <h3>{{$store.state.count}}</h3>
    <div>
      <button @click="handleAddClick(10)">增加</button>
      <button @click="handleReduceClick(10)">减少</button>
    </div>
  </div>
</template>

methods: {
    handleAddClick(n){
      // 不要在组件中直接修改vuex中的数据，
      // 为什么呢？ 因为无法被调试工具记录和检测到
      // this.$store.state.count++

      // 这个地方是你往vuex 中提交的一个方法; 
      // 第一个参数是你向vuex中提交的一个方法，
      // 第二个参数是你向vuex中提交的参数
      this.$store.commit('mutationsAddCount',n);
    },
    handleReduceClick(n){
      this.$store.commit('mutationsReduceCount',n);
    }
  }

以下为Vue Devtools工具

·
·
·
·

actions，actions是异步操作

创建actions对象，并且使用
这里我在两个方法中使用了两个不同的参数，一个是context，它是一个和store对象具有相同对象属性的参数。在第二个函数中，我是直接使用了这个对象的commit的方法。

案例一：

const actions = {
     //使用方法一： context -->context.commit
    actionsAddCount(context, n = 0) {
        console.log(context) 
        return context.commit('mutationsAddCount', n)
    },
    //使用方法一： { commit }--> commit
    actionsReduceCount({ commit }, n = 0) {
        return commit('mutationsReduceCount', n)
    }
}
export default new Vuex.Store({
    state,
    mutations,
    actions
})

context的话就相当于state的父亲，上一级，包含着state中的所有属性
context:{
        state,   等同于store.$state，若在模块中则为局部状态
        rootState,   等同于store.$state,只存在模块中
        commit,   等同于store.$commit
        dispatch,   等同于store.$dispatch
        getters   等同于store.$getters
}
常规写法调用的时候会使用context.commit，但更多的是使用es6的变量解构赋值，也就是直接在参数的
位置写自己想要的属性，如：{commit}。

在methods中，增加两个方法，使用dispath来触发

 <div>异步操作</div>
  <div>
    <button @click="handleActionsAdd(10)">异步增加</button>
    <button @click="handleActionsReduce(10)">异步减少</button>
  </div>

handleActionsAdd(n){
      this.$store.dispatch('actionsAddCount',n)
},
handleActionsReduce(n){
      this.$store.dispatch('actionsReduceCount',n)
}

---

案例二：参考例子

/**
 * 创建完文件后需要去到main.js中引入成全局
 */
import Vue from "vue";
import Vuex from "vuex";
//使用vuex
Vue.use(Vuex);
const state = {
  targetUser: {} //用户详细资料数据
};
 
const getters = {
  //获取到用户状态,//实时监听state值的变化(最新状态)
  targetUser: state => state.targetUser
};
 
const mutations = {
  //自定义改变state初始值的方法
  SET_TARGET_USER(state, targetUser) {
    if (targetUser) {
      state.targetUser = targetUser; //如果targetUser有内容就赋给状态信息
    } else {
      //如果没内容就给targetUser赋空对象
      state.targetUser = {};
    }
  }
};
 
const actions = {
  //这里面的方法是用来异步触发mutations里面的方法,context与store 实例具有相同方法和属性
  // 页面定义的setGargetUser,targetUser为页面传过来的值
  setGargetUser({ commit }, targetUser) {
    commit("SET_TARGET_USER", targetUser);
  }
} 

组件中调用

this.$store.dispatch('setGargetUser',friend)

---

·
·

vuex actions使用(action和mutations的区别)

 action的功能和mutation是类似的，都是去变更store里的state，不过action和mutation有两点不同：

1、action主要处理的是异步的操作，mutation必须同步执行，而action就不受这样的限制，也就是说action中我们既可以处理同步，也可以处理异步的操作

2、action改变状态，最后是通过提交mutation

·
·
·

getters

可以对state中的成员加工后传递给外界
state 当前VueX对象中的状态对象
·
·
例如

getters:{
	//remaining(state) {
    //  console.log(state);
    // return state.todos.filter(item => item.done === false).length
    //},
    nameInfo(state){
        return "姓名:"+state.name
    },
    fullInfo(state,getters){
        return getters.nameInfo+'年龄:'+state.age
    }  
}

组件中调用

this.$store.getters.fullInfo