vuex的基礎運用

目錄

1.目錄結構

2.調用方法

3.module示例

4.state檔案

5.getter檔案

6.mutation檔案

7.action檔案

1.目錄結構

參考官網：https://vuex.vuejs.org/zh/guide/structure.html

├── index.html
├── main.js
├── api
│   └── ... # 抽取出API請求
├── components
│   ├── App.vue
│   └── ...
└── store
    ├── index.js          # 我們組裝子產品并導出 store 的地方
    ├── actions.js        # 根級别的 action
    ├── mutations.js      # 根級别的 mutation
    └── modules
        ├── cart.js       # 購物車子產品
        └── products.js   # 産品子產品
           

 index檔案示例

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import getters from './getter'
import actions from './action'
import mutations from './mutation'
import user from './moudle/user'

Vue.use(Vuex)

export default new Vuex.Store({
    state,
    getters,
    mutations,
    actions,
    modules: {
        user
    },
    strict: process.env.NODE_ENV !== 'production'   //嚴格模式
})
           

2.調用方法

<template>
  <div class="about">
    <h1>state</h1>
    <div>appName: {{appName}}</div>
    <div>userName: {{userName}}</div>
    <h1>getter</h1>
    <div>appName: {{getAppName}}</div>
    <div>userName: {{getUserName}}</div>
    <h1>mutation</h1>
    <button @click="SET_APPNAME('myVue')">改變appName</button>
    <button @click="SET_USERNAME('唐老鴨')">改變userName</button>
    <h1>action</h1>
    <button @click="actionAppName">異步改變appName</button>
    <button @click="actionUserName">異步改變userName</button>
  </div>
</template>
<script>
  /* 不引入輔助函數可通過this.$store進行操作 */
  import { mapState,mapGetters,mapMutations,mapActions } from 'vuex'
  export default {
      name:'about',
      computed:{
          // appName () {
          //     return this.$store.state.appName
          // },
          ...mapState(['appName']),
          ...mapState({
              userName:state => state.user.userName
          }),
          //getter
          getAppName(){
              return this.$store.getters.getAppName
          },
          ...mapGetters([
              'getUserName'
          ])
      },
      /*不要再methods中使用箭頭函數*/
      methods:{
          //mutation
          ...mapMutations([
              'SET_USERNAME'
          ]),
          SET_APPNAME: function(userName){
              this.$store.commit('SET_APPNAME',userName)
          },
          //action
          ...mapActions([
              'actionUserName'
          ]),
          actionAppName: function(){
              this.$store.dispatch('actionAppName')
          },
      }
  }
</script>
           

3.module示例

const state={
    userName:'王小明'
}

const getters={
    getUserName:(state) => {
        return state.userName + '真帥'
    }
}

const mutations={
    SET_USERNAME:(state,params)=>{
        state.userName = params
    }
}

const actions={
    actionUserName({commit}){
        setTimeout(()=>{
            commit('SET_USERNAME','你的名字')
        },1500)
    }
}

export default {
    state,
    getters,
    mutations,
    actions
}
           

4.state檔案

const state = {
    // 初始狀态
    appName:'textVue'
}

export default state
           

5.getter檔案

const getters = {
    // 初始狀态
    getAppName:(state) => {
        return state.appName + '-v1.0'
    }
}
export default getters
           

6.mutation檔案

const mutation = {
    // 初始狀态
    SET_APPNAME:(state,params)=>{
        state.appName = params
    }
}
export default mutation
           

7.action檔案

const action = {
    // 初始狀态
    actionAppName({commit}){
        /*遠端接口推薦自己再建立檔案統一管理*/
        setTimeout(()=>{
            commit('SET_APPNAME','異步')
        },1500)
    }
}
export default action