Vuex的使用

Vuex

安装

-- npm 安装

npm install vuex --save

-- store.js 引用

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {},
  mutations: {},
  actions:{}
})

-- main.js 挂载

import store from './store'
new Vue({
  el: '#app',
  store
})

State

State提供唯一的公共数据源，所有共享的数据都要统一放到Store中的State中存储，例如后台管理系统中的菜单。

如：

const store = new Vuex.Store({
    state: {
        count:0
    },
  mutations: {},
  actions:{}
})

在组件中访问State的方式：

1).this.$store.state.全局数据名称 如：

this.$store.state.count

2).先按需导入mapState函数，然后数据映射为计算属性：

import { mapState } from 'vuex'
export default {
  // ...
  computed: mapState({
    // 箭头函数可使代码更简练
    count: state => state.count,

    // 传字符串参数 'count' 等同于 `state => state.count`
    countAlias: 'count',

    // 为了能够使用 `this` 获取局部状态，必须使用常规函数
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}
export default {
  computed: {
  // 使用对象展开运算符将此对象混入到外部对象中
  ...mapState(['count'])
	}
}

Mutation

Mutation用于修改变更$store中的数据

打开store.js文件，在mutations中添加代码如下

mutations: {
    add(state,step){
      //第一个形参永远都是state也就是$state对象
      //第二个形参是调用add时传递的参数
      state.count+=step;
    }
  }

在Vue组件中使用：

<button @click="Add">+1</button>

methods:{
  Add(){
    //使用commit函数调用mutations中的对应函数，
    //第一个参数就是我们要调用的mutations中的函数名
    //第二个参数就是传递给add函数的参数
    this.$store.commit('add',10)
  }
}


使用mutations的第二种方式：
import { mapState,mapMutations } from 'vuex'

export default {
  data() {
    return {}
  },
  methods:{
      //获得mapMutations映射的sub函数
      ...mapMutations(['sub']),
      //当点击按钮时触发Sub函数
      Sub(){
          //调用sub函数完成对数据的操作
          this.sub(10);
      }
  },
  computed:{
      ...mapState(['count'])
      
  }
}

Action

在mutations中不能编写异步的代码，会导致vue调试器的显示出错。在vuex中我们可以使用Action来执行异步操作。

打开store.js文件，修改Action，如下：

actions: {
  addAsync(context,step){
    setTimeout(()=>{
      context.commit('add',step);
    },2000)
  }
}

然后在vue中给按钮添加事件代码如下：

第二种方式：
import { mapActions } from 'vuex'

methods:{
  ...mapMutations(['subAsync'])
}

如下：
import { mapState,mapMutations,mapActions } from 'vuex'

export default {
  data() {
    return {}
  },
  methods:{
      //获得mapMutations映射的sub函数
      ...mapMutations(['sub']),
      //当点击按钮时触发Sub函数
      Sub(){
          //调用sub函数完成对数据的操作
          this.sub(10);
      },
      //获得mapActions映射的addAsync函数
      ...mapActions(['subAsync']),
      asyncSub(){
          this.subAsync(5);
      }
  },
  computed:{
      ...mapState(['count'])
      
  }
}