Vuex的使用 Vuex的使用

1.安装：npm install vuex --save
2.配置vuex
a) 在src下新建一个文件夹store，然后在store下建index.js:src->store->index.js
b)index.js代码如下:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state:{
city:'北京'
}
...
})
3.在main.js里引用store下的index.js
a) import store from '@/store/index.js'
b) 在new Vue里注册store
new Vue({
el: '#app',
router,
store, //注册store
components: { App },
template: ''
})
4.在组件中使用

其中：由于vuex提供了简写的API：
在子组件中引入API

========================
其中各个文件代码如下：

store->index.js:
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
// import actions from './actions'
import mutations from './mutations'
Vue.use(Vuex)
export default new Vuex.Store({
state:state,
// actions:actions,
mutations:mutations,
getters:{
doubleName(state){
return state.name+" "+state.name
}
}
})
store->state.js:
let defaultName='武汉加油'
try {
if(localStorage.name){
defaultName=localStorage.name
}
}catch (e){

}
export default {
name:defaultName //step4
}
3.store->mutations.js:
export default {
changeName(state,name){
state.name=name
try {
localStorage.name=name //step 1 //step5
}catch (e){