vuex store的运用

作者:未知 / 来源:网络 / 整理:脚本之家如果知识不能与人分享,这不算是真正的知识了。
vuex用来管理vue的所有组件状态。首先下载vuex,”vuex”:”^3.0.1”,运用”vuex-persistedstate”来对数据进行缓存。下载”vuex-persistedstate”在文件中引入:(新建一个store文件夹,在文件夹下的index.js文件进行如下编写)import Vue from 'vue'import Vuex from 'vuex'import createPersistedState...

vuex用来管理vue的所有组件状态。
首先下载vuex,”vuex”:”^3.0.1”,运用”vuex-persistedstate”来对数据进行缓存。下载”vuex-persistedstate”
在文件中引入:(新建一个store文件夹,在文件夹下的index.js文件进行如下编写)

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'
Vue.use(Vuex)

定义简单模块:

const module = {
    state: {
        user: {
            name: 'rookie'
        }
    },getters: {},mutations: {
        setUser(state,payload){
            if(payload.hasOwnProperty('name')){
                state.user.name = payload.name
            }
        }
    },plugins: [createPersistedState()]
}

上面是一个简单的vuex,在vuex中对应的store应用,在store中包含组件的共享状态state和改变状态的方法(暂且称作方法)mutations。注意state相当于对外的只读状态,不能通过store.state.user.name来更改,使用store.commit方法通过触发mutations改变state。
在页面中获取记录的值name为rookie

mounted(){
    console.log(this.$store.state.user.name);
}

store.state为获取store中的值,此时在my页面中打印出来的值为rookie,而我们想要修改name的值,则需要借助store.commit方法来触发mutations:

this.$store.commit('setUser',{name: 'kuke_kuke'})

在mutations中找到setUser,第二个参数payload为传入的对象{name: ‘kuke_kuke’},调用方法hadOwnProperty来判断传入的对象是否有name属性,从而修改state中的值,此时在页面中再次打印user.name的值为’kuke _ kuke’。
最后导出模块:

const store = new Vuex.Store(module)
export default store

别忘记在main.js中获取模块并使用:

import store from './store'
new Vue({
    store
})

作者:rookie.he(kuke_kuke)
博客链接:http://blog.csdn.net/qq_33599109
欢迎关注支持,谢谢!

你可能在找的问题:

vue教程

Vue页面跳转动画效果的实现方法

百度了好久都没办法实现vue中一个页面跳到另一个页面,甚至到google上搜索也是没办法的,最终还是找了高人亲自指导,所以下面这篇文章主要给大家介绍了关于Vue页面跳转动画效果的实现方法,需要的朋友可以参考下

vue教程

vue构建动态表单的方法示例

这篇文章主要介绍了vue构建动态表单的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

vue教程

玩转vue的slot内容分发

这篇文章主要介绍了玩转vue的slot内容分发,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

vue教程

vue 巧用过渡效果(小结)

这篇文章主要介绍了vue 巧用过渡效果(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

微信扫一扫

微信扫一扫

微信扫一扫,分享到朋友圈

标题
返回顶部