[NUXT] Update state with Vuex Actions in Nuxt.js

You can conditionally add classes to vue.js templates using v-bind:class . This would help display the status of a todo as you add a Vuex action to patch Todos. This lesson walks-through setting up a toggle button that triggers a toggle action to patch Todos in Vuex.

<Template>  <Div>    <form@submit. Prevent= "Add (Task)">      <inputV-model= "task"type= "text" />      <inputtype= "Submit"value= "ADD">    </form>    <articleclass= "Pa3 pa5-ns">      <ulclass= "List pl0 ml0 center mw6 ba b--light-silver br2">        <Liv-for= "Todo of Todos"class= "Flex items-center ph3 pv3 bb b--light-silver">          <span v-bind:class= "{strike:todo.complete}" class= "Flex-auto">{{Todo.id}} {{Todo.task}}</span>           <button  @click= "Toggle (Todo)"><img  src  = "Https://icon.now.sh/check"  alt= "Toggle"></button  >           <Button@click= "Remove (TODO)"><imgsrc= "Https://icon.now.sh/trash"alt= "Delete"></Button>        </Li>      </ul>    </article>  </Div></Template><Script>Import {mapstate, mapactions} from'Vuex'Import {init} from'./shared'Exportdefault{fetch:init, computed: {... mapstate ({todos: (state)=State.todos})}, data () {return{task:'Some Data'}}, Methods: {... mapactions (['Add',        'Remove',         'toggle'       ])    }  }</Script>

Store/index.js:

Import Vuex from ' Vuex 'Import Axios from' Axios 'Const Store= () + =NewVuex.store ({state: {todos: []}, Mutations: {init (state, Todos) {State.todos=Todos}, add (state, Todo) {State.todos=[... state.todos, Todo]}, remove (state, Todo) {State.todos= State.todos.filter ((t) = = {        returnT.id!==todo.id})}, toggle (state, Todo) {State.todos= State.todos.map (T = = {        returnT.id = = =todo.id?todo:t})}}, Actions: {Async Add (context, Task) {const COMMIT=Context.commit Const RES= await axios.post (' Https://todos-cuvsmolowg.now.sh/todos ', {task, complete:false}) Commit (' Add ', Res.data)}, async remove ({commit}, Todo) {await axios.Delete(' https://todos-cuvsmolowg.now.sh/todos/${todo.id} ')Commit (' Remove ', Todo)}, async toggle ({commit}, Todo) {const RES= await Axios.patch (' https://Todos-cuvsmolowg.now.sh/todos/${todo.id} ', {complete:!todo.complete})Commit (' Toggle ', Res.data)} }}) ExportdefaultStore

[NUXT] Update state with Vuex Actions in Nuxt.js