VUE - vuex state的使用


1,安裝

進入項目目錄,執行 vue add vuex 命令

 

2,會在src的目錄下新增store文件夾

 

3,打開store文件夾下的index.js  ,  給 state 設定一些數據

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
     count:0,
    todos:[
      {id:'1', title:'todoItem1',completed:false},
      {id:'2', title:'todoItem2',completed:false},
      {id:'3', title:'todoItem3',completed:false},
      {id:'4', title:'todoItem4',completed:false},
      {id:'5', title:'todoItem5',completed:false}
    ]
  },
  getters:{

  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

 4, App.vue  來獲取這些數據

<template>
  <div id="app">
    <p> {{ count}} </p>        <!--  count為computed中注冊的方法名  -- >
    <p> {{todos}} </p>
  </div>
</template>

<script>

export default {
  name: 'app',
   computed: {
    count(){
      return this.$store.state.count   //獲取 store中state的count
    },
    todos(){
      return this.$store.state.todos
    }
  },
}
</script>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM