一篇搞定Vuex

Posted xinsiwei18

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了一篇搞定Vuex相关的知识,希望对你有一定的参考价值。

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>

  

以上是关于一篇搞定Vuex的主要内容,如果未能解决你的问题,请参考以下文章

vuex:一篇看懂vuejs的状态管理神器

VSCode自定义代码片段13——Vue的状态大管家

VSCode自定义代码片段13——Vue的状态大管家

VSCode自定义代码片段13——Vue的状态大管家

一篇搞定Git基本使用

Java类加载过程梳理,一篇搞定