VUE框架使用VueX实现携带信息------VUE框架

逃离我推掉我的手 2024-02-25 03:58 43阅读 0赞

>     npm install vuex@3
> 
> npm install vuex@3

>     import Vue from "vue";
>     import Vuex from "vuex";
>     Vue.use(Vuex)
>     
>     const store = new Vuex.Store({
>         state:{
>             count: 0
>         },
>         mutations: {
>             increment (state) {
>                 state.count++;
>             }
>         }
>     })
>     export default store
> 
> import Vue from "vue";
> 
> import Vuex from "vuex";
> 
> Vue.use(Vuex)
> 
> const store = new Vuex.Store(\{
> 
> state:\{
> 
> count: 0
> 
> \},
> 
> mutations: \{
> 
> increment (state) \{
> 
> state.count++;
> 
> \}
> 
> \}
> 
> \})
> 
> export default store

>     <template>
>       <div class="hello">
>         {
>         {this.$store.state.count}}
>       </div>
>     </template>
>     
>     <script>
>     export default {
>       name: 'HelloWorld',
>       props: {
>         msg: String
>       }
>     }
>     </script>
>     
>     <style scoped>
>     </style>
> 
> <template>
> 
> <div class="hello">
> 
> \{ \{this.$store.state.count\}\}
> 
> </div>
> 
> </template>
> 
> <script>
> 
> export default \{
> 
> name: 'HelloWorld',
> 
> props: \{
> 
> msg: String
> 
> \}
> 
> \}
> 
> </script>
> 
> <style scoped>
> 
> </style>

>     import Vue from 'vue'
>     import App from './App.vue'
>     import store from './store';
>     Vue.config.productionTip = false
>     
>     new Vue({
>       render: h => h(App),
>       store
>     }).$mount('#app')
> 
> import Vue from 'vue'
> 
> import App from './App.vue'
> 
> import store from './store';
> 
> Vue.config.productionTip = false
> 
> new Vue(\{
> 
> render: h => h(App),
> 
> store
> 
> \}).$mount('\#app')