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.调用方法

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