一篇搞定Vuex

Posted 2020-12-25 xinsiwei18

1.简介

　　首先，你必须明显明白vuex到底是干啥的，主要解决开发中的哪些问题？

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

　　说白了，就是：提供了那么一个公共存储的地方，存放各个组件的数据，组件访问数据和操作数据访问这个地方即可

　　所以，Vuex主要解决是组件间数据传递问题，尤其是嵌套组件，项目一大时，父子组件间的数据传递就非常麻烦了，而Vuex则提供了一种集中管理组件数据的方案，当然小型项目就没必要用Vuex了

 

2.Demo准备

• vue init webpack-simple vuex-demo
• cd vuex-demo
• npm install
• npm install vuex -S

 

3.访问store对象的两种方式　　

　　Vuex的核心是Store(仓库)，相当于是一个容器，一个store实例中包含以下属性的方法：

• state　　定义属性（状态、数据）
• getters　　用来获取属性
• actions　　定义方法（动作）
• commit　　提交变化，修改数据的唯一方式就是显式的提交mutations
• mutations　　定义变化

　　注：不能直接修改数据，必须显式提交变化，目的是为了追踪到状态的变化

 

　　创建store.js文件，在main.js中导入并配置store.选项

import Vue from ‘vue‘
import Vuex from ‘vuex‘

Vue.use(Vuex);

//定义属性(数据)
var state = {
  count: 6
}


//创建store对象
const store = new Vuex.Store({
  state,
})

//导出store对象
export default store;

import Vue from ‘vue‘
import App from ‘./App.vue‘

import store from ‘./store.js‘  //导入store对象

new Vue({
  store,
  el: ‘#app‘,
  render: h => h(App)
})

　

　　方式一：通过this.$store访问

  //方式1：通过this.$store访问
  computed: {
    count() {
      return this.$store.state.count;
    }
  }

　　方式二：通过mapState、mapGetters、mapActions访问，vuex提供了两个方法

• mapState　　获取state
• mapGetters　　获取getters
• mapActions　　获取actions

import Vue from ‘vue‘
import Vuex from ‘vuex‘

Vue.use(Vuex);

//定义属性(数据)
var state = {
  count: 6
}

//定义getters
var getters = {
  count(state) {
    return state.count;
  }
}

//定义actions,要执行的操作，如流程判断、异步请求
const actions = {
  increment(context) { //包含 commit dispatch state
    context.commit(‘increment‘);
  },
  decrement(context) {
    if (context.state.count > 10) {
      context.commit(‘decrement‘);
    }
  }
}

//定义mutations,处理状态（数据）的改变
const mutations = {
  increment(state) {
    state.count++;
  },
  decrement(state) {
    state.count--;
  }
}

//创建store对象
const store = new Vuex.Store({
  state,
  getters,
  actions,
  mutations,
})

//导出store对象
export default store;

 

<template>
  <div id="app">
    <button @click="increment">增加</button>
    <button @click="decrement">减小</button>
    <p>当前数字为：{{count}}</p>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from "vuex";

export default {
  name: "app",
  data() {
    return {
      msg: "Welcome to Your Vue.js App"
    };
  },
  //方式1：通过this.$store访问
  /*computed: {
    count() {
      return this.$store.state.count;
    }
  }*/

  /*computed:mapState([
    ‘count‘
  ])*/

  computed: mapGetters(["count"]),
  methods:mapActions([
    ‘increment‘,
    ‘decrement‘,
  ])
};
</script>

<style>
</style>