vuex概要

ログインまたはストアユーザーの個人情報は、コンポーネントがサブコンポーネント開発者のページ要求の後に渡す同じインターフェイスにvuex格納された後、現在のI接点へのプロジェクトのために、たくさんあります。

レッドボックスはvuex関連する文書です。
そして、最初にそれの理論について話しています。

自己管理アプリケーションのこの状態は、次のセクションが含まれています。

状態、アプリケーションデータの駆動源と、
ビューは、宣言ビューステートにマッピングされ、
アクション、表示状態の変化にユーザ入力に応答して。

1.state
状態は、状態または変数に格納されています。

この例では、このプロジェクトは、データとステータスを大量に保存されています。
我々はvuexデータに記述する場合、あなたはアセンブリ参照されたい、あなたはあなたが必要なコンポーネントを参照する必要があります。

import { mapState} from 'vuex'

//当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组。
computed: mapState([
  // 映射 this.count 为 store.state.count
  'count'(这是你在vuex中的stats中声明过的变量名)
])

//mapState 函数返回的是一个对象。我们如何将它与局部计算属性混合使用呢？通常，我们需要使用一个工具函数将多个对象合并为一个，以使我们可以将最终对象传给 computed 属性。但是自从有了对象展开运算符（现处于 ECMAScript 提案 stage-4 阶段），我们可以极大地简化写法：
computed: {
  ...mapState({
    // ...
  })
}

2.getters

getters：对数据获取之前的再次编译，可以理解为state的计算属性。
下图为例，对state中的navSizeControl这个数据进行再加工。

通过属性访问
Getter 会暴露为 store.getters 对象，你可以以属性的形式访问这些值。

let xxx = this.$store.getters.xxxxxxx

在组件中使用getters

首先在vuex中

myCount(state){
 return 123
}

在组件中引用

import { mapGetters } from 'vuex';
export default {
  ...
  computed:{
  ...mapGetters({"myCount"})
  }
}

3.Mutation
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。

在组件中我们想把某一数据存入vuex中，就需要

文档是这么说的：

你不能直接调用一个 mutation handler。这个选项更像是事件注册：“当触发一个类型为 increment 的 mutation 时，调用此函数。”要唤醒一个 mutation handler，你需要以相应的 type 调用 store.commit 方法。

他说这么一堆，我特么也没咋看懂啊！！！就是用 commit就完了呗。

官方文档继续说了，这次我看懂了！

Mutation 需遵守 Vue 的响应规则
既然 Vuex 的 store 中的状态是响应式的，那么当我们变更状态时，监视状态的 Vue 组件也会自动更新。这也意味着 Vuex 中的 mutation 也需要与使用 Vue 一样遵守一些注意事项：

最好提前在你的 store 中初始化好所有所需属性。

当需要在对象上添加新属性时，你应该

使用 Vue.set(obj, ‘newProp’, 123), 或者

以新对象替换老对象。例如，利用 stage-3 的对象展开运算符我们可以这样写：

state.obj = { ...state.obj, newProp: 123 }

在组件中提交Mutation ：

import { mapMutations } from 'vuex'

export default {
  // ...
  methods: {
    ...mapMutations([
      'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
      // `mapMutations` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
    ]),
    ...mapMutations({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
    })
    someThing(){
    //第一种调用方法
       this.$store.commit('increment') //把vuex中的Mutation传进来，然后进行操作，increment是Mutation中的方法，直接调用。并且可以修改vuex中的state的值。
   // 第二种调用方法
      this.increment()
    }
  }
}

　　Mutation 必须是同步函数：因为当 mutation 触发的时候，回调函数还没有被调用，devtools 不知道什么时候回调函数实际上被调用——实质上任何在回调函数中进行的状态的改变都是不可追踪的。
如果要写入异步函数，就需要接下来出场的人了。Action！

4.Action
Action 类似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。

在vuex中，actions访问mutation需要用到context.commit

例子如下：

actions：{
   myIncrease(context){
    context.commit('increment')
    也可以axios请求
   }
}

　　在组件中使用action

import { mapActions } from 'vuex'
export default {
  // ...
  methods: {
    ...mapActions([
      'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`

      // `mapActions` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
    ]),
    ...mapActions({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
    }),
     someThing(){
         this.increment()
     }
  }
}

おすすめ