欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

VueX常用配置与使用方法

程序员文章站 2024-03-12 17:30:38
...

安装

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>
相关标签: vuex vue