Vuex von Grund auf

Dieses Mal werde ich Ihnen Vuex von Grund auf vorstellen. Was sind die Vorsichtsmaßnahmen, um Vuex von Grund auf neu zu starten?

Was ist Vuex?

vuex ist eine zentralisierte Zustandsverwaltungsarchitektur, die speziell für vue.js entwickelt wurde. Zustand? Ich verstehe darunter den Teil, in dem die Attribute in den Daten mit anderen Vue-Komponenten geteilt werden müssen, was als Zustand bezeichnet wird. Einfach ausgedrückt sind es die Attribute, die in den Daten gemeinsam genutzt werden müssen.

Vuex vorstellen (vorausgesetzt, das Projekt wurde mit dem Vue-Gerüsttool erstellt)

1. Verwenden Sie das npm-Paketverwaltungstool, um Vuex zu installieren. Geben Sie einfach den folgenden Befehl in die Steuerbefehlszeile ein.

 npm install vuex --save

Es ist zu beachten, dass hier –save hinzugefügt werden muss, da wir Ihr Paket in der Produktionsumgebung verwenden.

2. Erstellen Sie einen neuen Store-Ordner (dies ist nicht erforderlich), erstellen Sie eine neue Datei „store.js“ unter dem Ordner und fügen Sie unsere Vue und Vuex in die Datei ein.

 import Vue from 'vue';
 import Vuex from 'vuex';

3. Verwenden Sie unseren Vuex und referenzieren Sie ihn nach dem Import mit Vue.use.

 import Vue from 'vue';
 import Vuex from 'vuex';

Nach diesen drei Schritten können wir Spaß haben, auch wenn Vuex erfolgreich referenziert wurde.

4. Fügen Sie die neue Vuex-Datei in main.js ein

 import storeConfig from './vuex/store'

5. Fügen Sie dann das Store-Objekt hinzu, wenn Sie das Vue-Objekt instanziieren:

 new Vue({
  el: '#app',
  router,
  store,//使用store
  template: '<App/>',
  components: { App }
 })

Machen wir eine Demo für den Neuling

1. Jetzt fügen wir der Datei „store.js“ ein konstantes Objekt hinzu. Die Datei store.js ist die Datei, als wir vuex eingeführt haben.

 const state = {
  count:1
 }

2. Verwenden Sie den Exportstandard, um den Code zu kapseln, damit er extern referenziert werden kann.

 export default new Vuex.Store({
  state
 });

3. Erstellen Sie eine neue Vue-Vorlage mit dem Namen count.vue im Komponentenordner. In der Vorlage führen wir die soeben erstellte Datei store.js ein und verwenden {{$store.state.count}}, um den Zählwert in der Vorlage auszugeben.

 <template>
  <p>
   <h2>{{msg}}</h2>
   <hr/>
   <h3>{{$store.state.count}}</h3>
  </p>
 </template>
 <script>
  import store from '@/vuex/store'
  export default{
   data(){
    return{
     msg:'Hello Vuex',

    }
   },
   store
  }
 </script>

4. Fügen Sie zwei Methoden hinzu, um den Status in der Datei „store.js“ zu ändern.

const mutations={
  add(state){
   state.count+=1;
  },
  reduce(state){
   state.count-=1;
  }
 }

Die Mutationen hier sind fest geschrieben, was bedeutet, dass sie geändert werden können. Sie müssen sich also keine Sorgen machen, dass die Art und Weise, wie wir den Wert des Zustands ändern möchten, in Mutationen geschrieben werden muss .

5. Fügen Sie der count.vue-Vorlage zwei Schaltflächen hinzu und rufen Sie die Methoden in Mutationen auf.

 <p>
  <button @click="$store.commit(&#39;add&#39;)">+</button>
  <button @click="$store.commit(&#39;reduce&#39;)">-</button>
 </p>

Durch die Vorschau auf diese Weise können Sie die Anzahl in vuex addieren oder subtrahieren.

Statuszugriffsstatusobjekt

const state, das nennen wir das Zugriffsstatusobjekt, es ist unser SPA (Single-Page-Anwendung) Gemeinsamer Wert in .

Weisen Sie das Lernstatusobjekt dem internen Objekt zu, d. h. weisen Sie den Wert in stoe.js dem Wert in den Daten in unserer Vorlage zu. Es gibt drei Zuweisungsmethoden

1. Direkte Zuweisung durch berechnete berechnete Attribute

Das berechnete Attribut kann Operationen an den Werten in Daten ausführen Vor der Ausgabeänderung verwenden wir diese Funktion, um den Statuswert in store.js dem Datenwert in unserer Vorlage zuzuweisen.

 computed:{
  count(){
   return this.$store.state.count;
  }
 }

Hier ist zu beachten, dass Sie im Satz return this.$store.state.count Folgendes schreiben müssen, sonst können Sie $store nicht finden. Diese Schreibweise ist leicht zu verstehen, aber schwieriger zu schreiben. Schauen wir uns die zweite Schreibweise an.

2. Wert über das MapState-Objekt zuweisen

Wir müssen zuerst den Import verwenden, um MapState einzuführen.

import {mapState} from 'vuex';

Dann schreiben Sie den folgenden Code in das berechnete Attribut:

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

Hier verwenden wir die ES6-Pfeilfunktion, um einen zu zählenden Wert zuzuweisen.

3. Weisen Sie Werte über das MapState-Array zu

 computed:mapState(["count"])

Dies ist die einfachste Schreibweise und wird in der Praxis häufig verwendet Projektentwicklung.

Mutations修改状态（$store.commit( )）

Vuex stellt die Commit-Methode zum Ändern des Status bereit. Wir fügen den Inhalt des Demo-Beispielcodes ein und überprüfen kurz unsere Änderungsmethode auf der Schaltfläche.

 <button @click="$store.commit(&#39;add&#39;)">+</button>
 <button @click="$store.commit(&#39;reduce&#39;)">-</button>

store.js-Datei:

 const mutations={
  add(state){
   state.count+=1;
  },
  reduce(state){
   state.count-=1;
  }
 }

Wertübergabe: Dies ist nur die einfachste Operation zum Ändern des Status. In tatsächlichen Projekten müssen wir beim Ändern des Status häufig den Wert übergeben. Im obigen Beispiel addieren wir beispielsweise jedes Mal nur 1, aber jetzt müssen wir die übergebenen Werte addieren. Tatsächlich müssen wir Mutations nur einen weiteren Parameter hinzufügen und ihn beim Festschreiben übergeben. Schauen wir uns den spezifischen Code an:

现在store.js文件里给add方法加上一个参数n。

 const mutations={
  add(state,n){
   state.count+=n;
  },
  reduce(state){
   state.count-=1;
  }
 }

在Count.vue里修改按钮的commit( )方法传递的参数，我们传递10，意思就是每次加10.

 <p>
  <button @click="$store.commit(&#39;add&#39;,10)">+</button>
  <button @click="$store.commit(&#39;reduce&#39;)">-</button>
 </p>

模板获取Mutations方法

实际开发中我们也不喜欢看到$store.commit( )这样的方法出现，我们希望跟调用模板里的方法一样调用。
 例如：@click=”reduce” 就和没引用vuex插件一样。要达到这种写法，只需要简单的两部就可以了：

1、在模板count.vue里用import 引入我们的mapMutations：   

 import { mapState,mapMutations } from 'vuex';

2、在模板的<\script>标签里添加methods属性，并加入mapMutations

 methods:mapMutations([
   'add','reduce'
 ]),

通过上边两部，我们已经可以在模板中直接使用我们的reduce或者add方法了，就像下面这样。

 <button @click="reduce">-</button>

getters计算过滤操作

getters从表面是获得的意思，可以把他看作在获取数据之前进行的一种再编辑,相当于对数据的一个过滤和加工。你可以把它看作store.js的计算属性。

getters基本用法：

比如我们现在要对store.js文件中的count进行一个计算属性的操作，就是在它输出前，给它加上100.我们首先要在store.js里用const声明我们的getters属性。

 const getters = {
  count:function(state){
   return state.count +=100;
  }
 }

写好了gettters之后，我们还需要在Vuex.Store()里引入，由于之前我们已经引入了state和mutations，所以引入里有三个引入属性。代码如下，

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

在store.js里的配置算是完成了，我们需要到模板页对computed进行配置。在vue 的构造器里边只能有一个computed属性，如果你写多个，只有最后一个computed属性可用，所以要对上节课写的computed属性进行一个改造。改造时我们使用ES6中的展开运算符”…”。

 computed:{
  ...mapState(["count"]),
  count(){
   return this.$store.getters.count;
  }
 },

需要注意的是，你写了这个配置后，在每次count 的值发生变化的时候，都会进行加100的操作。

用mapGetters简化模板写法

我们都知道state和mutations都有map的引用方法把我们模板中的编码进行简化，我们的getters也是有的，我们来看一下代码。

首先用import引入我们的mapGetters

 import { mapState,mapMutations,mapGetters } from 'vuex';

在computed属性中加入mapGetters

 ...mapGetters(["count"])

actions异步修改状态

actions和之前讲的Mutations功能基本一样，不同点是，actions是异步的改变state状态，而Mutations是同步改变状态。至于什么是异步什么是同步这里我就不做太多解释了，如果你不懂自己去百度查一下吧。

在store.js中声明actions

actions是可以调用Mutations里的方法的，我们还是继续在上节课的代码基础上进行学习，在actions里调用add和reduce两个方法。

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

在actions里写了两个方法addAction和reduceAction，在方法体里，我们都用commit调用了Mutations里边的方法。细心的小伙伴会发现这两个方法传递的参数也不一样。

•ontext：上下文对象，这里你可以理解称store本身。
•{commit}：直接把commit对象传递过来，可以让方法体逻辑和代码更清晰明了。

模板中的使用

我们需要在count.vue模板中编写代码，让actions生效。我们先复制两个以前有的按钮，并改成我们的actions里的方法名，分别是：addAction和reduceAction。

  <p>
   <button @click="addAction">+</button>
   <button @click="reduceAction">-</button>
  </p>

改造一下我们的methods方法，首先还是用扩展运算符把mapMutations和mapActions加入。

  methods:{
    ...mapMutations([ 
      'add','reduce'
    ]),
    ...mapActions(['addAction','reduceAction'])
  },

你还要记得用import把我们的mapActions引入才可以使用。

增加异步检验

我们现在看的效果和我们用Mutations作的一模一样，肯定有的小伙伴会好奇，那actions有什么用，我们为了演示actions的异步功能，我们增加一个计时器（setTimeOut）延迟执行。在addAction里使用setTimeOut进行延迟执行。

  setTimeOut(()=>{context.commit(reduce)},3000);
  console.log('我比reduce提前执行');

我们可以看到在控制台先打印出了‘我比reduce提前执行'这句话。

module模块组

随着项目的复杂性增加，我们共享的状态越来越多，这时候我们就需要把我们状态的各种操作进行一个分组，分组后再进行按组编写。那今天我们就学习一下module：状态管理器的模块组操作。

声明模块组：

在vuex/store.js中声明模块组，我们还是用我们的const常量的方法声明模块组。代码如下:

  const moduleA={
    state,mutations,getters,actions
  }

声明好后，我们需要修改原来 Vuex.Stroe里的值：

  export default new Vuex.Store({
    modules:{a:moduleA}
  })

在模板中使用

现在我们要在模板中使用count状态，要用插值的形式写入。 

<h3>{{$store.state.a.count}}</h3>

如果想用简单的方法引入，还是要在我们的计算属性中rutrun我们的状态。写法如下：

  computed:{
    count(){
      return this.$store.state.a.count;
    }
  },

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

sort如何进行son数据排序

怎样操作日历范围选择插件

Das obige ist der detaillierte Inhalt vonVuex von Grund auf. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!