博客

vue的几个项目中也使用过vuex，总结一下，方便使用

仓库写法(store.js)

1.引入部分

import Vue from 'vue'    //引入vue
import Vuex from 'vuex'    //引入vuex

Vue.use(Vuex)    //    vue使用vuex

2.存储写法

const state = {
    dyrouter:"",
}

const mutations = {
    SET_DYNAMIC_ROUTER(state,value){
        state.dyrouter = value
    },
}
const getters = {
    dyrouter: state => state.dyrouter,
}
const actions = {        //异步写法，返回promise对象
    setdynamicrouter({commit},data){
        return new Promise(resolve => {
            commit('SET_DYNAMIC_ROUTER',data)
            resolve()
        })
    },
}

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

截图参考

vue中引入

1. main.js中写法

import store from './store.js'    //看store的文件在哪里引入

new Vue({
  el: '#app',
  router,
  store,                //vue中注册组件
  components: { App },
  template: '<App/>'
})

vue使用仓库读取、写入（同步）

1.读取

• （方法一）

import { mapState } from 'vuex'        //引入mapState

computed: {
            ...mapState([
                "dyrouter"
            ]),
        },

直接可以在视图中绑定”dyrouter”参数

• （方法二）

import store from '@/store'    //引入store

store.getters.dyrouter            //读取store仓库里的dyrouter参数

2.写入

import { mapMutations } from 'vuex'

methods: {
            ...mapMutations([                           //引入mapMutations
                "SET_DYNAMIC_ROUTER"                    //引入vuex里面的函数方法
            ]),
            this.SET_DYNAMIC_ROUTER("传入的参数");        //使用该方法
}

vue使用仓库写入（异步）

import store from '@/store'        //引入store

store.dispatch('setdynamicrouter',"传入的参数").then(()=>{
            存入完成后的执行回调，在这里再去取参数就不会为空
        })

以上总结仅为个人常用到的，更多详见官网