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: '<App/>'
})
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
<template>
<div class="page">
<button @click="test()">123131331</button>
<p>{{this.$store.state.count}}</p>
<p>{{this.$store.state.data}}</p>
</div>
</template>
<script>
export default {
data () {
return {
}
},
components: {
},
methods: {
test() {
this.$store.commit(newData,'敲可爱') // 第一个参数是需要触发的事件，第二个是传递的
}
}
}
</script>
<style scoped lang="less">
</style>
// 通过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
<template>
<div class="page">
<button @click="test()">123131331</button>
<p>{{this.$store.state.count}}</p>
<p>{{this.$store.getters.addCount} }</p>
</div>
</template>
<script>
export default {
data () {
return {
}
},
components: {
},
methods: {
test() {
this.$store.commit(newData,'敲可爱') // 第一个参数是需要触发的事件，第二个是传递的
}
}
}
</script>
<style scoped lang="less">
</style>
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(context) {-->
<!-- context.commit('newData','是异步 ')-->
<!--}-->
等同于结构赋值
addCount({commit}) {
commit('newData','是异步 ')
}
})
// content
<template>
<div class="page">
<button @click="test()">123131331</button>
<p>{{this.$store.state.count}}</p>
<p>{{this.$store.getters.addCount} }</p>
</div>
</template>
<script>
export default {
data () {
return {
}
},
components: {
},
methods: {
test() {
//this.$store.commit(newData,'敲可爱') // 第一个参数是需要触发的事件，第二个是传递的
this.$store.dispatch('newData')
}
}
}
</script>
<style scoped lang="less">
</style>
写的有点啰嗦哈，这是我自己的以前的笔记，写的还是比较详细，希望能帮助到需要帮助的人
网友评论