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>