极客观点
项目管理
HarmonyOS
我想在根实例中给store赋值，然后在子组件里面去获取这些值。但是在根实例中给store赋值的时候似乎赋值不上去。
var store = new Vuex.Store({
state: {
paramInfos: []
},
mutations: {
initParamInfos(state,paramInfos) {
state.paramInfos = paramInfos;
}
},
actions:{
}});
function(){
var self=this;
self.$store.commit("initParamInfos", data);
}在devtool里面查看，base状态下是一个arrary，
commit之后就变成一个可以一直无线展开的object，
有人知道是怎么回事吗？
求帮助，谢谢大家！
二次编辑贴一下完整的代码好了：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="此处有一个内部的引用库"></script>
<script type="text/javascript" src="./httpVueLoader.js"></script>
<script type="text/javascript" src="./vuex.js"></script>
<style>
</style>
</head>
<body>
<div id="vueapp" style="display: none">
<my-paramcontrol v-bind:paraminfos="paramInfos"></my-paramcontrol>
<my-table v-bind:columns="searchResult.Result[0].Columns" v-bind:rows="searchResult.Result[0].Rows"></my-table>
<my-label></my-label>
<my-container></my-container>
</div>
<script>
$$include("_nms, vue2, jquery, bootstrap3, echarts4, bootstrap.datetimepicker, moment, nms.mricodepagination");
Vue.config.devtools = true;//开启Vue调试工具。
Vue.use(Vuex); //使用vuex进行状态管理。
var vue;
$(function () {
var customQueryApi = $.slimApi("./CustomQueryHandler.ashx");
// 创建数据仓库。方便子组件的状态管理。这东西的用法和data基本一致，把旧的data赋值的地方换成它就好啦~
var store = new Vuex.Store({
state: {
paramInfos: []
},
mutations: {
initParamInfos(state,paramInfos) {
state.paramInfos = paramInfos;
}
},
actions: {
initParamInfos(context,param) {
context.commit("initParamInfos",param);
}
}
});
var vueData = {
searchParams: {},// 第一次请求后，获取到和当前报表相关的查询参数。
paramInfos: {},// data
searchResult: { //根据参数查询得到的报表结果。
"Result": [
{
"Columns": [],
"Rows": []
}]
}
}
var vueComponents = {
"my-table": httpVueLoader("./vue/table.vue"),
"my-label": httpVueLoader("./vue/label.vue"),
"my-container": httpVueLoader("./vue/container.vue"),
"my-paramcontrol": httpVueLoader("./vue/paramcontrol.vue")
}
function vueReady() {
// for ready
var self = this;
self.getParamInfos();
}
function VueWatch() {
// watch some property
var self = this;
self.data1 = function (newData1, oldData1) {
}
}
function VueMethodContainer() {
// 获取查询参数等信息。
this.getParamInfos = function () {
var self = this;
customQueryApi.ajax(false, "QueryPararmInfosWithQueryId", function (data) {
self.searchParams = data;
// 获取默认参数。
self.$store.dispatch("initParamInfos", data.paramInfos);
});
}
// 获取查询结果。
this.query = function (param) {
var self = this;
if (!param) {
alert(param);
return;
}
customQueryApi.ajax("Query", param, function (result) {
self.searchResult = result;
$("#vueapp").show();
});
}
}
vue = new Vue({
el: "#vueapp",
store, // 注册全局数据仓库。
data: vueData,
components: vueComponents,
mounted: vueReady,
watch: new VueWatch(),
methods: new VueMethodContainer()
});
});
</script>
</body>
</html>debug看到的是正常的赋值，但是在取的时候就变成了undefined。。
actions里面没写函数吗
要在actions里面commit
然后再dispatch这个action
大致就是下面这个套路。建议你看看vuex的语法