CSP build and Alpine.store

[sjoe77]

Does Alpine.store work with the latest csp build?

<div x-data>
            <div x-text="$store.myStore.data.genreAggregate._count"></div>
  </div>

Alpine Expression Error: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "default-src 'self'".
Expression: "$store.myStore.data.genreAggregate._count"

[ekwoka]

Did you try it and see?

[SimoTod]

The csp build only support single variables/functions in the directive.
You need to define a getter or a normal function in your x-data and access the any neated object from there.

[SimoTod]

Also, given the error above, it doesn't seem like you are using the csp build

[sjoe77]

I ended up using Alpine.data instead of Alpine.store. This works nicely!
Thanks for you response. Much appreciated.

import Alpine from "@alpinejs/csp";   // <-- I am using csp build
...
...
class PageData {
    constructor() {
      this.loaded = false;
    }
    async init() {
      document.addEventListener("click", (event) => {
        event.preventDefault();
        console.log(event);
        handleNext(event, this);
        handlePrev(event, this);
      });
      const fields = await fetchData();
      this.fields=fields;
      this.loaded = true;
    }
    getColValue(){
      return this.$data.row[this.$data.col.name];
    }
}
// Initialize state
document.addEventListener('alpine:init', () => Alpine.data("PageData", () =>  new PageData()))
 
  // Start Alpine after data has been initialized
  Alpine.start();

[ekwoka]

oh wow! Someone using classes! I made the PR to allow classes to work properly as components, and wasn't sure if anyone was really using that

[sjoe77]

Yes. Thanks to you!. I saw that post about someone requesting js access to proxy object created by Alpine.data and got the idea. I maintain my page state in that object and then the event listeners can get access to it that way to update the state.