.Net object mapping to vue objects best practice?

Hello,

I’m using vuex and vue in our .net application with web-api 2.0.

First question:
I read on vue js docs its good practice to always initalise your object properties ( in data object ).
Does this apply to vuex store as well? So for every state object I would initialise the properties.

Second question:
I have to return arrays\obejcts from the api, and they have PascalCase for the properties, however I would like to use camelCasing for my properties in vue and vuex. At the moment i have to write redundant mapping in my mutations when I get my payload from the server:

setProduct: function(state, product) {
            state.product.productId = product.ProductId;
            state.product.description = product.Description;
    ...
}

It is even worse when it comes to arrays…
What is the preferred approach? Should I just use PascalCase?

Thank you

As far as I know, if you want the best responsiveness to your properties, you should define them, or use Vue.set. Otherwise, you’ll run into reactivity issues. So just make sure you initially set, or explicitly set (Vue.set) afterwards the properties you want reactive.

For your other issue, take a look at JSON.net (Newtonsoft.Json.dll). You can decorate your properties with an attribute that looks like this:

[JsonObject(MemberSerialization.OptIn)]
public class YourClassName
{
		
	[JsonProperty("id")]
	public int Id { get; set; }
		
	[JsonProperty("title")]
	public string Title { get; set; }
		
}

I try to use best practices when it comes to property names, so this works well for me.

This is a headache, and I went down the wrong route of mapping on the client side, which caused me all sorts of grief. ASP.NET Core’s serializer defaults to camelCase now, but even non-core you should be able to be either (1) flip a setting in the json serializer to do camel casing or (2) find some other serializer out there that does it.

I wouldn’t use Pascal casing in the client side. I wouldn’t do mapping to camel casing in the client side. And I also wouldn’t do the attributes on the POCOs as ModGen suggested - even though that’s the least painful out of the three.

Why not the attributes? Curious as to your reasoning. Another option is to serialize the objects of your choice. JSON.net has a method that allows you to specify camelCase on the type of serialization. However, I prefer to “see” my explicitly set json property values. Anyway, just curious.

Thank you both for the response. I actually like the idea of the attribute, I don’t see harm in decorating my viewmodels with them but it can be tedious, so first I will also look into if I can find a serializer that does the job, even for nested objects. I will repost it here once.

I was also thinking using Typescript, but I need a quicker solution.

Right so all the serialization options for web api i found had to be registered in appstart… Unfortunately this is not something I can do as there are other api controllers in the solution and I’m not sure what the impact would be, but I found this article

Setting it on controller level with an attribute, i think thats the best for me right now. Thank you!!

You can serialize your C# model to JavaScript object to use it with Vue data (camelCase properties).

data: JsonConvert.SerializeObject(Model, new JsonSerializerSettings() { ContractResolver = new CamelCasePropertyNamesContractResolver() }