vuex项目实例

一、简介

我们来看看对Vuex比较专业的介绍：

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

简而言之，Vuex采用类似全局对象的形式来管理所有组件的公用数据，如果想修改这个全局对象的数据，得按照Vuex提供的方式来修改（不能自己随意用自己的方式来修改）。

二、优点

Vuex状态管理跟使用传统全局变量的不同之处：

1.Vuex的状态存储是响应式的：就是当你的组件使用到了这个Vuex的状态，一旦它改变了，所有关联的组件都会自动更新相对应的数据，这样开发者省事很多。

.
2.不能直接修改Vuex的状态：如果是个全局对象变量，要修改很容易，但是在Vuex中不能这样做，想修改就得使用Vuex提供的唯一途径：显示地提交（commint）mutations来实现修改（没了解过这里没关系，下一节前端君会有介绍）。这样做的好处就是方便我们跟踪每一个状态的变化，在开发过程中调试的时候，非常实用。

三、步骤

1.安装Vuex

npm install vuex --save

2.引用Vuex

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

3.创建仓库Store

要使用Vuex，我们要创建一个实例 store，我们称之为仓库，利用这个仓库 store 来对我们的状态进行管理。

//创建一个 store
 const store = new Vuex.Store({});

Vuex的作用类似全局对象，Vuex 使用单一状态树，用一个对象State包含了整个应用层级的所有状态，你可以理解为这些状态就是一堆全局变量和数据。

假设我们有一个全局状态count的值为5。那么，我们就可以将其定义为 state 对象中的key和value，作为全局状态供我们使用。如下：

//创建一个 store
 const store = new Vuex.Store({
    //state存储应用层的状态
    state:{
        count:5  //总数：5
    }
 });

Mutations：

​​Vuex​​​给我们提供修改仓库 ​​store​​​中的状态的唯一办法就是通过提交​​mutation​​

我们在 ​​mutations​​​中定义了一个叫​​increment​​的函数，函数体就是我们要进行更改的地方

会接受 ​​state​​作为第一个参数，第二个是自定义传参

const store = new Vuex.Store({
    //state存储应用层的状态
    state:{
        count:5  //总数：5
    },
    mutations:{
        increment(state，value){
            state.count += value;
        }
    }
 });

我们在提交​​commit​​​时候，字符串参数​​increment​​​,就是对应在 ​​mutations​​​中的​​increment​​​。
一般通过方法或钩子触发，例如：

methods: {
   getVal(event) {
     //获取当前的按键的值
     let value = event.target.dataset.value;
     //通过commit提交一个名为increment的mutation
     this.$store.commit("increment", value);
   }
 }

在组件中获取{{count}}方式：

export default {
  computed: {
      count(){
          return this.$store.state.count;
      }
  }
};

1.​​increment​​​官方说是type，其实就是注册的事件名
2.可以是单个参数
3.如果是多个参数，我们则用对象放入，否则会报错

Getters：

可以认为，getters 是store的计算属性，类似于computed,对state里的数据进行一些过滤，改造等等

假设我们要在state.count的基础上派生出一个新的状态newCount出来，就适合使用我们的 getters

getters 接受 state 作为其第一个参数

const store = new Vuex.Store({
   //state存储应用层的状态
   state:{
      count:5  //总数：5
   },
   getters:{
      newCount:state => state.count * 3
   }
 });

在组件中获取{{​​newCount​​}}方式：

export default {
  computed: {
      newCount(){
          return this.$store.getters.newCount;
      }
  }
};

action：

用来解决异步流程来改变state数据。
而​​​matution​​​是直接进行同步操作的，如果你在​​mutations​​​里进行异步操作，你会发现没用，并不会起任何效果
只有通过​​​action=>mutations=>states​​,这个流程进行操作,具体步骤如下：

export default new Vuex.Store({
  //存放数据
  state: {
    obj: {}, 
  },
  //4.通过commit mutations中的方法来处理
  mutations: {
    getParam (state,Object) {
     //5.修改state中的数据
       state.obj= Object
    }
  },
  //2.接受dispatch传递过来的方法和参数
  actions: {
    getParamSync (context,Object) {
      //处理异步操作
        setTimeout(()=>{
          //3.通过commit提交一个名为getParam的mutation
          //action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation
            context.commit('getParam',Object)
        },3000)
    }
  }
})

然后我们就在组件里这么调用就可以了

methods: {
   getVal() {
     let name= 'xia';
     let age= '26';
     let sex= 'man';
     //1.通过dispatch将方法getParamSync和多个参数{name,age,sex}传递给actions
     this.$store.dispatch('getParamSync',{name,age,sex})
   }
 }

运用vuex语法糖mapMutations

mutations.js

const mutations = {
    SET_NEWS(state, val) {
        state.news = val
    }
}
export default mutations

1.存储数据( a.vue文件 )

import { mapMutations } from "vuex"; // 引入mapMutations
export default {
  methods: {
    ...mapMutations({
        // 将changeNews与mutations中的SET_NEWS关联
        changeNews: "SET_NEWS"
    }),
    submit(){
      // 提交一个名为changeNews的mutation，并传入参数val
      let val = 'test news';
      this.changeNews(val);// 相当于this.$store.commit("changeNews", val);
    }
  }
}

2.获取数据( b.vue文件 )

import { mapGetters } from "vuex"; // 引入mapGetters 
export default {
  computed: {
        // 用vuex读取数据(读取的是getters.js中的数据)
        // 相当于this.$store.getters.news(vuex语法糖)
        ...mapGetters(["news"])
  },
  created() {
        // 获取getters中news数据
        console.log(this.news);
  }
}

3.store文件目录结构

index.js:
import Vue from 'vue'
import Vuex from 'vuex'
import * as actions from './actions'
import * as getters from './getters'
import state from './state'
import mutations from './mutations'
//每次修改state都会在控制台打印log
import createLogger from 'vuex/dist/logger'

Vue.use(Vuex)

const debug = process.env.NODE_ENV !== 'production'

export default new Vuex.Store({
  actions,
  getters,
  state,
  mutations,
  strict: debug, // 当debug=true时开启严格模式(性能有损耗)
  plugins: debug ? [createLogger()] : []
})

state.js:

const state = {
  news: {}
}

export default state

mutations.js:

const mutations = {
  SET_NEWS(state, val) {
    state.news= val
  }
}


export default mutations

getters.js:

// 通常通过getters取数据 (this.$store.getters.news;)

export const news = state => state.news  // 不做其他处理 直接映射出去

actions.js:

//异步处理

…4.使用store

在main.js中引用

import store from ‘./store’ //vuex存储文件

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