Menu
I'm using ASP.Net Web Pages (vb Razor) and have been having trouble getting Webpack setup with it and have been suggested elsewhere on stackoverflow (How to setup ASP.NET Core + Vue.Js?) to simply use the vue.js CDN without a build system.
Question is: it would be now great to be able to use Vuex for state management but it seems like all the examples use webpack - are there anyways around this without a build system or alternatives to vuex for creating a datastore and mantaining vue's reactivity?
Thanks, and sorry for the uncommon question - I know most people use webpack!
795
Is it really necessary to use webpack to build Vue. js-powered applications? The answer is no. Thanks to native browser support for JavaScript Modules, it's easier than ever to build powerful JavaScript applications without using any build tools.
To use Vuex we can either connect it to our application via CDN link or as an npm package.
You can't use Vuex without Vue. Because: Vuex checks for the existence of Vue. Vuex depends largely on Vue for its reactivity inner workings.
Vue is the front-end framework, node's server language. The two can be used in combination. But not vue must rely on node to use. The two of them can be perfect to achieve the front and back separation of the development model.
Without a package builder you can use the CDN libraries for vuejs and vuex. It's simply a matter of including the vuex cdn after the vuejs cdn as vuex is designed to detect Vue and auto install itself.
you can see a jsfiddle showcasing it here example
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/2.1.1/vuex.min.js"></script>
</head>
<body>
<div id="app">
<div>{{ $store.state.count }}</div>
<button v-on:click="buttonClick">Click Me</button>
</div>
<script type="text/javascript">
new Vue(
{
'el': '#app',
'store': new Vuex.Store(
{
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
}
}
),
'methods': {
'buttonClick': function() {
this.$store.commit('increment')
}
}
}
)
</script>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
