vuejs3.txt

>>>>>>>> Vue 3  <<<<<<<<<


--------------------------------------
Keys:
vue3 js:
   submit form, validation, props, router
   store, actions, mutations, getters
--------------------------------------
Mirroring started
--------------------------------------
--------------------------------------

//Component.vue

<template>
</template>

<script>
export default {
	
}
</script>

<style>
</style>

---------------------------------------
---------------------------------------

Getting Started:

Install:

npm install -g @vue/cli
# OR
yarn global add @vue/cli

Create a project:

vue create my-project
# OR
vue ui

---------------------------------------
---------------------------------------


>>>> Vue 3 Vuex Store <<<<<<<



Website:
         https://learnvue.co/tutorials/vuex-in-vue-3



npm install vuex@next



--> main.js file


import { createApp } from "vue";
import { createStore } from "vuex";
// Create a new store instance or import from module.
const store = createStore({
  /* state, actions, mutations */
});
const app = createApp();
app.use(store);
app.mount("#app");



--> Vuex State

import { createApp } from "vue";
import { createStore } from "vuex";
const store = createStore({
  state: {
    count: 0,
  },
});
const app = createApp();
app.use(store);
app.mount("#app");


--> Access Vuex State - Options API

<script>
export default {
  mounted() {
    console.log(this.$store.state.count) // this.$store
  },
}
</script>


<template>{{ count }}</template>
<script>
export default {
  computed: {
    count() {
      return this.$store.state.count
    },
  },
}
</script>



--> Using Vuex mapState


<script>
import { mapState } from 'vuex'
export default {
  computed: mapState({
    count: 'count',
    // OR
    count: (state) => state.count,
    // OR IF WE NEED ACCESS TO `this`
    countPlusMultiplier(state) {
      return state.count + this.multiple
    },
  }),
}
</script>



--> Access Vuex State - Composition API


<script setup>
import { computed } from 'vue'
import { useStore } from 'vuex'
const store = useStore()
const count = computed(() => store.state.count)
</script>
<template>{{ count }}</template>


--> Using Vuex Helpers in the Composition API

npm install vuex-composition-helpers@next

<script setup>
import { useState, useActions } from 'vuex-composition-helpers/dist'

const { count } = useState(['count'])
</script>

<template>{{ count }}</template>


==>> ( Vuex Mutations  )

const store = createStore({
  state: {
    count: "",
  },
  mutations: {
    INCREMENT_COUNT(state, payload) {
      state.count += payload;
    },
  },
});


--> 

// Option 1
store.commit('INCREMENT_COUNT', 5)
// Option 2
store.commit({
  type: 'INCREMENT_COUNT',
  amount: 5,
})

-->

<template>
  {{ count }}
  <button @click="store.commit('INCREMENT_COUNT', 1)">Increment</button>
</template>



---> Mapping Vuex Mutations - Options API

<template>
  {{ count }}
  <button @click="INCREMENT_COUNT(1)">Increment</button>
</template>
<script>
import { mapMutations } from 'vuex'
export default {
  computed: {
    count() {
      return this.$store.state.count
    },
  },
  methods: mapMutations(['INCREMENT_COUNT']),
}
</script>


--> Mapping Vuex Mutations - Composition API

<script setup>
import { useState, useMutations } from 'vuex-composition-helpers/dist'
const { count } = useState(['count'])
const { INCREMENT_COUNT } = useMutations(['INCREMENT_COUNT'])
console.log(useMutations)
</script>
<template>
  {{ count }} <button @click="INCREMENT_COUNT(1)">Increment</button>
</template>


===> ( Vuex Actions )


const store = createStore({
  state: {
    count: 0,
  },
  mutations: {
    INCREMENT_COUNT(state, payload) {
      state.count += payload;
    },
  },
  actions: {
    incrementCount(context, payload) {
      context.commit("INCREMENT_COUNT", payload);
    },
  },
});


--> 

const store = createStore({
  // ...
  actions: {
    incrementCount(context, payload) {
      setTimeout(() => {
        context.commit("INCREMENT_COUNT", payload);
      }, 1000);
    },
  },
  // ...
});


==>  ( Mapping Vuex Actions ) 



<template>
  {{ count }}
  <button @click="incrementCount(1)">Increment</button>
</template>
<script>
import { mapActions } from 'vuex'
export default {
  computed: {
    count() {
      return this.$store.state.count
    },
  },
  methods: mapActions(['incrementCount']),
}
</script>



<script setup>
import { useState, useActions } from 'vuex-composition-helpers/dist'
const { count } = useState(['count'])
const { incrementCount } = useActions(['incrementCount'])
</script>
<template>
  {{ count }} <button @click="incrementCount(1)">Increment</button>
</template>



==> ( Gatters ) 


<script>
export default {
  computed: {
    doubleCountPlusOne() {
      return this.$store.getters.doubleCountPlusOne
    },
  },
  methods: mapActions(['incrementCount']),
}
</script>


const store = createStore({
  getters: {
    countOverValue: (state) => (val) => {
      return state.count > val;
  }
});


--> Mapping our Vuex Getters

<template>
  {{ doubleCountPlusOne }}
  <button @click="incrementCount(1)">Increment</button>
</template>
<script>
import { mapActions, mapGetters } from 'vuex'
export default {
  computed: mapGetters(['doubleCountPlusOne']),
  methods: mapActions(['incrementCount']),
}
</script>


--> 
<script setup>
import { useActions, useGetters } from 'vuex-composition-helpers/dist'
const { doubleCountPlusOne } = useGetters(['doubleCountPlusOne'])
const { incrementCount } = useActions(['incrementCount'])
</script>
<template>
  {{ doubleCountPlusOne }}
  <button @click="incrementCount(1)">Increment</button>
</template>








----------> End Of Store <--------------

----------------------------------------



----------------------------------------
--------> Vuex Store <------------------

Start Store: 


Installation and Setup:

In order to get started with Vuex, you can install it with npm or yarn.

npm install vuex@4 --save
# or with yarn
yarn add vuex@4


Then instantiate it via a createStore() function much like Vue 3's createApp() function.

// store/index.js
import {createStore} from 'vuex'
export default createStore()


Lastly, you register it with Vue like any other Vue plugin with the use() method.

// main.js
import { createApp } from 'vue'
import store from '@/store' // short for @/store/index
const app = createApp({ /* your root component */ })
app.use(store)

Store Definition

Stores in Vuex are defined via an object passed to the createStore function. The object can have any of the following properties: state, getters, mutations, and actions.

// store/index.js
export default createStore({
  state:{},
  getters:{},
  mutations: {},
  actions:{}
})


//State: 

state:{
  user: { name: 'John Doe', email: 'fake@email.com', username: 'jd123'},
  posts: [],
  someString: 'etc'
}


// ProfileComponent.vue
<template>
  <h1>Hello, my name is {{$store.state.user.name}}</h1>
</template>



Or we can clean up the template a bit by using a computed property.

// ProfileComponent.vue
<template>
  <h1>Hello, my name is {{name}}</h1>
</template>
<script>
export default{
  computed:{
    name(){ return this.$store.user.name }
  }
}
</script>



<template>
  <h1>Hello, my name is {{user.name}}</h1>
</template>
<script>
export default{
  computed:{
    ...mapState(['user'])
  }
}
</script>


//Gatters

{
  state:{
   posts: ['post 1', 'post 2', 'post 3', 'post 4']
  },

  // the result from all the postsCount getters below is exactly the same
  // personal preference dicates how you'd like to write them
  getters:{
    // arrow function
    postsCount: state => state.posts.length,

    // traditional function
    postsCount: function(state){
      return state.posts.length
    },

    // method shorthand
    postsCount(state){
      return state.posts.length
    },

    // can access other getters
    postsCountMessage: (state, getters) => ${getters.postsCount} posts available
  }
} 


Accessing the store's getters is much the same as accessing the state except you look under the getters property instead of the state property.

// FeedComponent.vue
<template>
  <p>{{$store.getters.postsCount}} posts available</p>
</template>



You could also use a computed property in your component or a helper function (this time mapGetters) like with the state.

// FeedComponent.vue
<template>
  <p>{{postsCount}} posts available</p>
</template>
<script>
import {mapGetters} from 'vuex'
export default{
  computed:{
    ...mapGetters(['postsCount'])
  }
}
</script>



{
  state: {
    posts: ['post 1', 'post 2', 'post 3', 'post 4'],
    user: { postsCount: 2 }
    errors: []
  }
  mutations:{
    // convention to uppercase mutation names
    INSERT_POST(state, post){
            state.posts.push(post)
    },
    INSERT_ERROR(state, error){
        state.errors.push(error)
    },
    INCREMENT_USER_POSTS_COUNT(state, error){
      state.user.postsCount++
    }
  },
  actions:{
    async insertPost({commit}, payload){
       //make some kind of ajax request 
       try{
         await doAjaxRequest(payload)

         // can commit multiple mutations in an action
         commit('INSERT_POST', payload)
         commit('INCREMENT_USER_POSTS_COUNT')
       }catch(error){
        commit('INSERT_ERROR', error)
       }
    }
  }
}



// PostEditorComponent.vue
<template>
  <input type="text" v-model="post" />
  <button @click="$store.dispatch('insertPost', post)">Save</button>
</template>


// PostEditorComponent.vue
<template>
  <input type="text" v-model="post" />
  <button @click="savePost">Save</button>
</template>
<script>
export default{
  methods:{
    savePost(){
      this.$store.dispatch('insertPost', this.post)
    }
  }
}
</script>


// PostEditorComponent.vue
<template>
  <input type="text" v-model="post" />
  <button @click="insertPost(post)">Save</button>
</template>
<script>
import {mapActions} from 'vuex'
export default{
  methods:{
    ...mapActions(['insertPost'])
  }
}
</script>


Website: 
 https://vueschool.io/articles/vuejs-tutorials/vuex-the-official-vuejs-store/

 

End store : 

----------------------------------------
----------------------------------------