VueX常用配置与使用方法

安装

npm install vuex --save

初始化VueX

• 新建一个store文件夹（这个不是必须的），并在文件夹下新建store.js文件，文件中引入我们的vue和vuex

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
//初始化数据
const state = {
  count: 0
};
var vuexStore = new Vuex.Store({
  state
});
// 使用 export default 封装，让外部可以访问
export default vuexStore;

在需要使用的组件中引入store.js,并使用

• 这里有3中方法去得到VueX里面的值
  1.使用this获取或通过computed的计算属性直接赋值

import store from "../store/store.js";
export default {
  store,//使用
  data(){
    return{
      //取值
      count:this.$store.state.count
    }
  }
};
//或则
computed:{
    count(){
        return this.$store.state.count;
    }
}

2.通过mapState的对象来赋值

import {mapState} from 'vuex';
computed:mapState({
  //理解为传入state对象，修改state.count属性
  count:state=>state.count  
})

3.通过mapState的数组来赋值

computed:mapState(["count"])

创建改变状态的方法

• 在store.js中

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

const state = {
  count: 0
};
//改变状态的方法
const mutations = {
  add(state) {
    state.count++;
  },
  mul(state) {
    state.count--;
  }
};
var vuexStore = new Vuex.Store({
  state,
  mutations //引入
});

// 使用 export default 封装，让外部可以访问
export default vuexStore;

使用改变状态的方法

• 在需要使用的组件中

<button @click="$store.commit('add')">add</button>

使用getters的方式更新数据

const getters = {
  count:function(state){
    return state.count +=100;
  }
};
var vuexStore = new Vuex.Store({
  state,
  mutations,
  getters
});

• 组件中导入mapGetters，并使用

1.导入

import { mapGetters } from 'vuex';

2.在methods中加入

...mapGetters(["count"])

3.在页面中使用

<button @click="count()">mapGetters模式的点击事件</button>

actions异步修改状态

1.在store中创建方法
- context：上下文对象，这里你可以理解称store本身
- {commit}：直接把commit对象传递过来，可以让方法体逻辑和代码更清晰明了

const actions ={
  addAction(context){
    context.commit('add',10)
  },
  reduceAction({commit}){
    commit('reduce')
  }
}

2.组件中import导入mapActions

import { mapActions } from 'vuex';

3.methods中加入mapActions

...mapActions(['addAction','reduceAction'])

4.页面中使用

<button @click="addAction">mapActions模式点击事件</button>