Vuex状态管理初始化代码

刺骨的言语ヽ痛彻心扉 2021-12-19 18:07 273阅读 0赞

## store目录: ##

![在这里插入图片描述][2019063019152578.png]  
state.js文件代码:

const state ={
        testValue: ''
    }
    export default state

mutation-types.js文件代码:  
规范化管理mutations中的方法

export const SET_TEST_VALUE ='SET_TEST_VALUE'

mutation.js文件代码:

import * as type from './mutation-types'
    //能更好的检测mutation-types.js文件中常量名的书写
    
    const mutations ={
        [type.SET_TEST_VALUE](state,value){
            state.testValue =value
        }
    }
    export default mutations

actions.js文件异步修改state数据,暂时为空

getters.js文件代码:

export const testValue =state =>state.testValue

index.js文件代码:

import Vue from 'vue'
    import Vuex from 'vuex'
    import * as actions from './actions'
    import * as getters from './getters'
    import state from './state'
    import mutations from './mutations'
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({
        actions,
        getters,
        state,
        mutations
    })

## 使用测试: ##

1.在mian.js文件中引入:

import store from './store/'
        new Vue({
          router,
          store,
          render: h => h(App)
        }).$mount('#app')

2.在组件中存入和获取:  
存入:

获取:

存储结果:  
![在这里插入图片描述][20190630193720789.png]  
打印结果:  
![在这里插入图片描述][20190630193759838.png]

[2019063019152578.png]: /images/20211219/814bcc41b3e64eb08d70e20c1cdc38a3.png
[20190630193720789.png]: /images/20211219/2143b8ab0e3d45ea9bb2e1009a33e6fa.png
[20190630193759838.png]: /images/20211219/c7ed7d0fb2c24563b06fab01e8dba3ea.png