vue之VUEX的使用记录

使用vueX的使用在搭建好vue开发环境的基础上使用 npm install vuex --save

VUEX使用示例先创建一个store文件，我在在里面分别创建mutation-type.js文件存放mutations的方法名

mutation-type.js文件具体代码

export const  ADD_DATA="ADD_DATA";
export const  REDUCE_DATA="REDUCE_DATA";

在创建store.js文件

在store.js里面引入VUEX插件和vue插件

具体代码：

import Vue from 'vue';//引入vue插件
import Vuex from 'vuex';//在引入vueX插件
import * as types from "./mutation-type";//引入mutation-type.js文件
Vue.use(Vuex);//注册vueX插件

const state={
  count:0
}

const mutations={
  [types.ADD_DATA] (state) {
  //调用mutation-type里面的方法名，事实在这里就已经可以调用了在调用的组件页面用this.$store.commit("ADD_DATA")
  //就可调用[types.ADD_DATA]方法
    state.count++;
  },
  [types.REDUCE_DATA] (state) {
    state.count --;
  }
}
//vueX里面限制mutation 必须是同步的这一点

//vuex为了解决mutations只有同步的问题,提出了actions(异步),专门用来解决mutations只有同步无异步的问题.
const actions={
  add({commit}){
    commit(types.ADD_DATA);
  },
  reduce ({commit}) {
      commit(types.REDUCE_DATA);
  }

}

export default new Vuex.Store({
  state,
  mutations,
  actions
})

//actions的触发方法需要dispach方法来触发

具体的调用方法在使用的组件中使用this.$store.dispatch('add')调用add方法来使count++改变值。

actions里面的commit()方法里面不能这样写commit([types.REDUCE_DATA]);这样写会报错的。

 

export default new Vuex.Store({  

     state,

     mutations,

      actions

})

还有mutations, //这里不能这样写mutation这样写会报错s不能少

 

 

但是可以这样写：

Vue组件调用方法：

          //vue组件调用方法一，方法一需引入import {mapActions} from 'vuex'

            ...mapActions({

                    StoreClick: 'add'

            }),

            //vue组件调用方法二

            StoreClick(){

                this.$store.dispatch("reduce");

                this.mathNum=this.$store.state.count;

            },

 

个人创建的微信公众号:    憨逗IT