<!-- 接一篇文章 vue開發看這篇文章就夠了 https://segmentfault.com/a/1190000012692321 --> <!-- vuex 咱們把它叫作狀態管理 ‘狀態’一詞來源與react 在react中數據在state中 實際上也就是"數據管理" vuex解決了大型項目的組件間的通訊問題 實際上也就是數據中介 全部的數據增刪改查所有經過vuex來實現 --> <div id="app"> <!--頁面總調用state中的數據--> store 中的數據:{{ $store.state.count }} <button @click="fn">修改store中的數據</button> <!-- 頁面中條用getters中的數據 --> <p>getters的使用:{{ $store.getters.doneTodosCount }}</p> </div> <!--引入包--> <script src="./vue.js"></script> <script src="./vuex.js"></script> <script> // 建立store,用來存儲項目中使用的數據(理解爲數據倉庫 倉庫中有管理數據的方法)。 // 也就是說 整個應用中的數據,都應該交給 store 來管理 // 開發環境下 引入vuex那須要use一下 Vue.use( vuex) const store = new Vuex.Store({ // state即狀態,也就是組件中的data(數據) state: { count: 0, todos: [ { id: 1, text: '...完成', done: true }, { id: 2, text: '...完成', done: true }, { id: 3, text: '...完成', done: true }, { id: 4, text: '...完成', done: true }, { id: 5, text: '...未完成', done: false } ] }, // getters 就是 store 的計算屬性,用法與計算屬性相同!!! getters: { doneTodosCount(state) { return state.todos.filter(todo => todo.done).length } }, // 注意:state中的數據只能經過 mutations 來修改!!! // 也就是:數據由 store 提供,一樣的修改數據方法也是由 store 來提供的,這就是:mutations mutations: { increment(state) { // 參數 state即:上面的state,也就是數據 state.count++ }, // payload 表示提交這個方法的時候,傳遞的數據,最好是一個對象 increment2(state, payload) { state.count += payload.num } } }) /* 使用 store 中的數據: 修改數據:store.commit('increment') 讀取數據:store.state.count */ var vm = new Vue({ el: '#app', data: { }, methods: { fn() { // this.$store.commit('increment') //經過commit觸發mutations中的方法 參數一:方法名 參數二:傳遞數據 this.$store.commit('increment2', {num: 3}) } }, // 將 store 與Vue實例關聯到一塊兒 store: store }) </script>