vuex使用
1、安装vuex
npm install vuex --save
2、安装promise:
Vuex 依赖 Promise。如果你支持的浏览器并没有实现 Promise (比如 IE),那么你可以使用一个 polyfill 的库,例如 es6-promise。将下列代码添加到你使用 Vuex 之前的一个地方:
import 'es6-promise/auto'
3、创建一个store仓库
const store = new Vuex.Store({
state: {
count: 2
},
mutations: {
increment (state) {
state.count++
}
}
})
4、在构建实例app这里引用
new Vue({
el: '#app',
router,
store,//这里引用
components: { App },
template: ' '
})
5、通过store.state 来获取状态对象
this.$store.state.count//因为state是响应式的,最好放在computer里面
console.log(this.$store.state.count)//2
6、通过commit显示提交来更改state里面的状态
this.$store.commit('increment')//1、通过commit显示提交 2、提交带上提交的方法并且加上引号(总是忘记引号)
vuex基本使用(二)--创建静态数据(state)
// 创建一个store.js仓库
import Vue from 'vue';
import Vuex from 'vuex';// 引用vuex;
Vue.use(Vuex);//使用Vuex
export default new Vuex.Store({ // 像外界导出一个new Store
state: { // 存放数据类似于data的静态数据
count: '小西瓜'
},
mutations: { //写方法,类似于method,只能同步
h t
},
action: { // 写方法,异步
}
})
// 在main.js中挂载 store
import Vue from 'vue';
import App from './App';
import store from './store';
Vue.config.productionTip = false //生产环境提示,这里设置成了false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app');
//在组件(模版引擎中)使用store静态数据
this.$store.state.count
修改静态数据(mutations)
// 在store.js
import Vue from 'vue';
import Vuex from 'vuex'; // 引用vuex;
Vue.use(Vuex);//使用Vuex
export default new Vuex.Store({ // 像外界导出一个new Store
state: { // 存放数据类似于data的静态数据
count: '小西瓜'
},
mutations: { //写方法,类似于method,同步
newData(state,parmas) { // 修改--第一个参数是state,第二个参数是事件触发接受参数
state.count = '小傻瓜'+parmas
}
},
action: { // 写方法,类似于method,异步
}
})
// 在content.vue
{{this.$store.state.count}}
{{this.$store.state.data}}
// 通过this.$store.commit('newData','敲可爱')修改数据
得到静态数据(getter)
import Vue from 'vue';
import Vuex from 'vuex';// 引用vuex;
Vue.use(Vuex);//使用Vuex
export default new Vuex.Store({ // 像外界导出一个new Store
state: { // 存放数据类似于data的静态数据
count: '小西瓜' ,
data: '我是新数据'
},
mutations: { //写方法,类似于method
},
getters: {
addCount(state) {
return state.count + '小西瓜啦啦啦'
}
}
})
// 在content.vue
{{this.$store.state.count}}
{{this.$store.getters.addCount} }
Actions
import Vue from 'vue';
import Vuex from 'vuex';// 引用vuex;
Vue.use(Vuex);//使用Vuex
export default new Vuex.Store({ // 像外界导出一个new Store
state: { // 存放数据类似于data的静态数据
count: '小西瓜' ,
data: '我是新数据'
},
mutations: {
newData(state,parmas) { // 修改--第一个参数是state,第二个参数是事件触发接受参数
state.count = '小傻瓜'+parmas
}
},
getters: {
addCount(state) {
return state.count + '小西瓜啦啦啦'
}
},
actions: { // 可以在时间函数里面使用,比如想几秒以后调用
等同于结构赋值
addCount({commit}) {
commit('newData','是异步 ')
}
})
// content
{{this.$store.state.count}}
{{this.$store.getters.addCount} }
写的有点啰嗦哈,这是我自己的以前的笔记,写的还是比较详细,希望能帮助到需要帮助的人