自己做网站代码廊坊网站建设优化
vuex可以定义共享数据。
1、主要结构
src/store/index.js 是使用vuex的核心js文件。
-
定义数据：state
-
修改数据(同步)：mutations
-
修改数据(异步)：action=调用=>mutations
下面定义了一个公共数据
msg，mutations方法setName，action方法sendAjax。
import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({// 定义共享数据，{{$store.state.msg}}展示，所以得组件都可以使用state: {msg:'这是vuex的公共消息',},getters: {},// 只能由mutations来实现修改，必须是同步操作mutations: {// state代表的是上面的state必须同名，但是后面的参数是形参名字随意，调用：this.$store.commit('setName','新的信息！');setName(state,newMsg){state.msg=newMsg;}},// action可以调用mutations，在action可以执行异步操作（Ajax），调用：this.$store.dispatch('sendAjax');actions: {// 通过传入context来调用mutations方法sendAjax(context){/*** 执行Ajax*/context.commit('setName','异步修改的信息');},},modules: {}
})2、操作共享数据
{{$store.state.msg}}展示数据msg，update1()调用mutations的setName方法修改msg，update2()调用action的sendAjax方法修改msg。
<template>
<div><h1>{{$store.state.msg}}</h1><input type="button" value="直接修改共享数据" @click="update1()"/><input type="button" value="异步修改共享数据" @click="update2()"/>
</div>
</template>
<script>export default {methods:{update1(){// 第一个参数是mutations定义的函数名，第二个是参数this.$store.commit('setName','新的信息！');},update2(){// 调用action方法，指定调用的函数名this.$store.dispatch('sendAjax');}}}
</script>