vuexプローブ

1.vuexのインストール

npm install vuex --save

2.srcフォルダの下にstoreフォルダを作成し、中にindexを作成します.jsファイル、ファイル内容は以下の通りです

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

Vue.use(Vuex);

//                ，        
const state = {
    count: 1 
}

// mutations    store  ,         ，        
const mutations = {
    //         this.$store.commit('add')    
    add(state){
        state.count++;
    },
    sub(state){
        state.count--;
    }
}

//     ，        
export default new Vuex.store({
   state,
   mutations
});

3.main.jsにstoreフォルダのindexを導入する.js

import Vue from 'vue'
import App from './App'
import router from './router' 
import store from './store'   //  index.js
Vue.config.productionTip = false  //             

//vue  
new Vue({
  el: '#app',
  router,
  store,                           // store   vue     
  template: '',
  components: { App }
})

4.コンポーネントで使用可能

<template>
  <div class="hello">
      <h1>Hello Vuexh1>
      <h5>{{$store.state.count}}h5>
      <p>
        <button @click="$store.commit('add')">+button>
        <button @click="$store.commit('sub')">-button>
      p>
  div>
template>


<style scoped>
    h5{
      font-size: 20px;
      color: red;
    }
style>

5.computedプロパティからstateステータスオブジェクトにアクセス

<template>
  <div class="hello">
      <h1>Hello Vuexh1>
      <h5>{{count}}h5>
      <p>
        <button @click="$store.commit('add')">+button>
        <button @click="$store.commit('sub')">-button>
      p>
  div>
template>
<script>
import{mapState} from 'vuex'
export default{
    computed:{
        count() {
            return this.$store.state.count
        }
        //            mapState
        computed:mapState({
          count:state => state.count + 10
        })

        // ECMA5  
        // computed:mapState({
        //   count:function(state){
        //     return state.count
        //   }
        // })

        //   
        // computed: mapState([
        //   'count'
        // ])

        //   
        //computed：{
        // ...mapState([
        //    'count'
        // ])
        }
    }
}
script>

<style scoped>
    h5{
      font-size: 20px;
      color: red;
    }
style>

6.mutationsトリガ状態(同期状態)

<template>
  <div class="hello">
      <h1>Hello Vuexh1>
      <h5>{{count}}h5>
      <p>
        <button @click="add">+button>
        <button @click="sub">-button>
      p>
  div>
template>
<script>
import {mapState,mapMutations} from 'vuex'
  export default{
    name:'hello', //  name    ，        ，             ，   
    //   
    computed: mapState([
      'count'
    ]),
    methods:{
      ...mapMutations([
          'add',
          'sub'
      ])
    }
  }
script>

7.getters計算属性はまずstoreファイルindexにある.js gettersを追加します.

const getters = {
  counted(state) {
    return state.count + 60
  }
};

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

//counted            state
////getters                       ,    count  ，       count，    。
      


  import {mapState,mapMutations,mapGetters} <span class="hljs-keyword">from</span> <span class="hljs-string">'vuex'</span>
  export <span class="hljs-keyword">default</span>{
    name:<span class="hljs-string">'hello'</span>,
    computed: {
      ...mapState([
        <span class="hljs-string">'count'</span>
      ]),
      ...mapGetters([
        <span class="hljs-string">'counted'</span>
      ])
    },
    methods:{
      ...mapMutations([
          <span class="hljs-string">'add'</span>,
          <span class="hljs-string">'sub'</span>
      ])
    }
  }

8.actions(非同期状態)はindex.jsにactionsを追加

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

//     
const state = {
    count: 1
}

// mutations    store        
const mutations = {
    add(state){
        state.count ++
    },
    sub(state){
        state.count --
    },
}
//     
const getters = {
    count(state){
        return state.count + 66
    }
}
//     
const actions = {
    addplus(context){
        context.commit('add') //  mutations     
        setTimeout(()=>{
            context.commit('sub')
        },2000)
        alert('      ，       sub   ')
    },
    subplus(context){
        context.commit('sub')
    }
}

export default new Vuex.Store({
    state,
    mutations,
    getters,
    actions
})
//context：     ，        store  。
//{commit}：   commit      ，                。
      

<template>
  <div class="hello">
      <h1>Hello Vuexh1>
      <h5>{{count}}h5>
      <p>
        <button @click="add">+button>
        <button @click="sub">-button>
      p>
      <p>
        <button @click="addplus">+plusbutton>
        <button @click="subplus">-plusbutton>
      p>
  div>
template>
<script>
  import {mapState,mapMutations,mapGetters,mapActions} from 'vuex'
  export default{
    name:'hello',
    computed: {
      ...mapState([
        'count'
      ]),
      ...mapGetters([
        'count'
      ])
    },
    methods:{
      //             
      ...mapMutations([
          'add',
          'sub'
      ]),
      //                 
      ...mapActions([
        'addPlus',
        'subPlus'
      ])
    }
  }
script>

<style scoped>
style>

しばらくはこんなにたくさん書いて、もっと深い問題は自分で実際の開発の中で勉強して体得する必要があります.